/**
 * 汎用ページネーション (minolink-pagination)
 *
 * バリアント (data-pagination-variant):
 *   - "bar"    : 件数表示 + 数字 + chevron 矢印（A 型 / 一覧の上）
 *   - "simple" : 数字 + circle-arrow-icon の円形矢印（B 型 / 一覧の下）
 *
 * DOM:
 *   <div class="minolink-pagination minolink-pagination--bar"
 *        data-pagination data-pagination-variant="bar">
 *     <p class="minolink-pagination__count" data-pagination-count></p>
 *     <nav class="minolink-pagination__nav" aria-label="ページ送り">
 *       <button class="minolink-pagination__arrow minolink-pagination__arrow--prev"
 *               data-pagination-prev aria-label="前のページ" hidden></button>
 *       <ol class="minolink-pagination__pages" data-pagination-pages></ol>
 *       <button class="minolink-pagination__arrow minolink-pagination__arrow--next"
 *               data-pagination-next aria-label="次のページ" hidden></button>
 *     </nav>
 *   </div>
 *
 * JS: themes/minolink/assets/js/components/pagination.js
 */

.minolink-pagination {
	--minolink-pagination-page-size: 2rem;
	--minolink-pagination-text-color: var(--wp--preset--color--contrast, #222);
	--minolink-pagination-active-color: var(--wp--preset--color--primary, #007aff);
	--minolink-pagination-muted-color: var(--wp--preset--color--gray-500, #888);
}

/* ---- root layout ---------------------------------------------------- */

.minolink-pagination--bar {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--20, 0.75rem);
}

.minolink-pagination--simple {
	display: flex;
	justify-content: center;
}

@media (min-width: 768px) {
	.minolink-pagination--bar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---- count text (A 型のみ) ----------------------------------------- */

.minolink-pagination__count {
	margin: 0;
	color: var(--minolink-pagination-text-color);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: var(--wp--custom--line-height--normal, 1.6);
}

/* ---- nav: 数字 + 矢印 ---------------------------------------------- */

.minolink-pagination__nav {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.minolink-pagination--simple .minolink-pagination__nav {
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.minolink-pagination__nav {
		gap: 0.75rem;
	}

	.minolink-pagination--simple .minolink-pagination__nav {
		gap: 1rem;
	}
}

/* ---- 数字リスト ----------------------------------------------------- */

.minolink-pagination__pages {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.minolink-pagination__page {
	display: flex;
}

.minolink-pagination__page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--minolink-pagination-page-size);
	height: var(--minolink-pagination-page-size);
	padding: 0 0.4rem;
	border: none;
	background: transparent;
	color: var(--minolink-pagination-text-color);
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: var(--wp--custom--font-weight--normal, 400);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.minolink-pagination__page-link:hover {
	color: var(--minolink-pagination-active-color);
}

.minolink-pagination__page-link.is-current,
.minolink-pagination__page-link[aria-current="page"] {
	color: var(--minolink-pagination-active-color);
	font-weight: var(--wp--custom--font-weight--bold, 700);
	cursor: default;
}

.minolink-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--minolink-pagination-page-size);
	height: var(--minolink-pagination-page-size);
	color: var(--minolink-pagination-muted-color);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1;
	user-select: none;
}

/* ---- 矢印ボタン ----------------------------------------------------- */

.minolink-pagination__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--minolink-pagination-text-color);
	cursor: pointer;
	transition: color 0.2s ease;
}

.minolink-pagination__arrow:hover {
	color: var(--minolink-pagination-active-color);
}

.minolink-pagination__arrow[hidden] {
	display: none;
}

/* ---- bar バリアント: chevron 矢印 ---------------------------------- */

.minolink-pagination--bar .minolink-pagination__arrow {
	width: 30px;
	height: 30px;
}

.minolink-pagination--bar .minolink-pagination__arrow svg {
	width: 100%;
	height: 100%;
}

/* ---- simple バリアント: circle-arrow-icon ------------------------- */

.minolink-pagination--simple .minolink-pagination__arrow {
	width: 30px;
	height: 30px;
}

.minolink-pagination--simple .minolink-pagination__arrow .circle-arrow-icon {
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.minolink-pagination--bar .minolink-pagination__arrow {
		width: 1.25rem;
		height: 1.25rem;
	}

	.minolink-pagination--simple .minolink-pagination__arrow {
		width: 2.75rem;
		height: 2.75rem;
	}
}