/**
 * Pagination Styles
 *
 * BEM 命名規則に基づいたページネーションスタイル。
 * テーマの変数や色はカスタムプロパティで上書き可能。
 */

/* ============================================================
   カスタムプロパティ（テーマ変数）
   ============================================================ */

:root {
    --pagination-gap: 4px;
    --pagination-size: 40px;
    --pagination-radius: 4px;
    --pagination-font-size: 0.9rem;

    --pagination-color: #333;
    --pagination-bg: #fff;
    --pagination-border: #ddd;

    --pagination-hover-color: #fff;
    --pagination-hover-bg: rgba(49,117,188,1);
    --pagination-hover-border: rgba(49,117,188,1);

    --pagination-current-color: #fff;
    --pagination-current-bg: rgba(49,117,188,1);
    --pagination-current-border: rgba(49,117,188,1);

    --pagination-disabled-color: #aaa;
    --pagination-disabled-bg: #f5f5f5;
    --pagination-disabled-border: #ddd;
}


/* ============================================================
   nav ラッパー
   ============================================================ */

.pagination {
    margin: 2rem 0;
}


/* ============================================================
   リスト
   ============================================================ */

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pagination-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ============================================================
   各アイテム
   ============================================================ */

.pagination__item {
    display: flex;
}


/* ============================================================
   リンク・スパン共通
   ============================================================ */

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-size);
    height: var(--pagination-size);
    padding: 0 0.6em;
    border: 1px solid var(--pagination-border);
    border-radius: var(--pagination-radius);
    background-color: var(--pagination-bg);
    color: var(--pagination-color);
    font-size: var(--pagination-font-size);
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}


/* ============================================================
   ホバー状態（リンクのみ）
   ============================================================ */

a.pagination__link:hover,
a.pagination__link:focus-visible {
    background-color: var(--pagination-hover-bg);
    border-color: var(--pagination-hover-border);
    color: var(--pagination-hover-color);
    outline: none;
}


/* ============================================================
   現在のページ
   ============================================================ */

.pagination__item--current .pagination__link {
    background-color: var(--pagination-current-bg);
    border-color: var(--pagination-current-border);
    color: var(--pagination-current-color);
    font-weight: bold;
    cursor: default;
    pointer-events: none;
}


/* ============================================================
   無効状態（前へ・次へが端にある場合）
   ============================================================ */

.pagination__item--disabled .pagination__link {
    background-color: var(--pagination-disabled-bg);
    border-color: var(--pagination-disabled-border);
    color: var(--pagination-disabled-color);
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================
   省略記号（…）
   ============================================================ */

.pagination__item--dots .pagination__link {
    border-color: transparent;
    background-color: transparent;
    cursor: default;
    pointer-events: none;
}



/* ============================================================
   レスポンシブ対応
   ============================================================ */

@media ( max-width: 480px ) {
    :root {
        --pagination-size: 36px;
        --pagination-font-size: 0.8rem;
    }

    /* スマートフォンでは前へ・次へボタン以外の番号を非表示にする例 */
    /* 必要に応じてコメントアウトを解除してください */

    /*
    .pagination__item:not( .pagination__item--prev ):not( .pagination__item--next ):not( .pagination__item--current ) {
        display: none;
    }
    */
}