/**
 * サイドバー事例セクションのAJAXページネーション用スタイル
 *
 * - スライドアニメーション
 * - is-hidden 共通ルール（pagination 両端の非アクティブ枠）
 */

/* ビューポート：スライド中のはみ出しを隠す */
.ajax-usecase__viewport {
  overflow: hidden;
  position: relative;
}

/* items リスト：スライドトランジション */
.ajax-usecase__items {
  transition: transform 300ms ease, opacity 300ms ease;
  will-change: transform, opacity;
}

/* 進行方向（次ページ）：旧は左へ抜ける、新は右から来る */
.ajax-usecase__items.is-slide-out-left {
  transform: translateX(-30%);
  opacity: 0;
}
.ajax-usecase__items.is-slide-in-right {
  transform: translateX(30%);
  opacity: 0;
  transition: none; /* 開始位置への瞬間移動 */
}

/* 逆方向（前ページ）：旧は右へ抜ける、新は左から来る */
.ajax-usecase__items.is-slide-out-right {
  transform: translateX(30%);
  opacity: 0;
}
.ajax-usecase__items.is-slide-in-left {
  transform: translateX(-30%);
  opacity: 0;
  transition: none;
}

/* 読込中はページネーションをクリック不可に */
.js-ajax-usecase-pagination.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

/* pagination() が出す prev/next の非表示枠：レイアウトを保持したまま不可視に */
.pagenation li.is-hidden {
  visibility: hidden;
  pointer-events: none;
}