<div class="pagination">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination">
    <button class="page-btn first">
        <i class="icon chevron-double-left w-4 h-4"></i>
    </button>
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
    <button class="page-btn last">
        <i class="icon chevron-double-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn">2</button>
    <button class="page-btn active">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <span class="ellipsis">...</span>
    <button class="page-btn">20</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination with-info">
    <span class="page-info">Page 2 of 16</span>
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination circular">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination grouped">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination bordered">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination compact">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination with-input">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <div class="page-input-wrapper">
        <input type="number" class="page-input" value="2" min="1" max="20" />
        <span class="page-total">of 20</span>
    </div>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination-wrapper">
    <div class="pagination">
        <button class="page-btn prev">
            <i class="icon chevron-left w-4 h-4"></i>
        </button>
        <button class="page-btn">1</button>
        <button class="page-btn active">2</button>
        <button class="page-btn">3</button>
        <button class="page-btn">4</button>
        <button class="page-btn">5</button>
        <button class="page-btn next">
            <i class="icon chevron-right w-4 h-4"></i>
        </button>
    </div>
    <div class="items-per-page">
        <label>Show:</label>
        <select class="per-page-select">
            <option value="10">10</option>
            <option value="25" selected>25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        <span>items per page</span>
    </div>
</div>

<!-- Tiny -->
<div class="pagination tiny">
    <button class="page-btn prev">
        <i class="icon chevron-left w-3 h-3"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-3 h-3"></i>
    </button>
</div>

<!-- Small -->
<div class="pagination small">
    <button class="page-btn prev">
        <i class="icon chevron-left w-3.5 h-3.5"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-3.5 h-3.5"></i>
    </button>
</div>

<!-- Default -->
<div class="pagination">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<!-- Large -->
<div class="pagination large">
    <button class="page-btn prev">
        <i class="icon chevron-left w-5 h-5"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-5 h-5"></i>
    </button>
</div>

<!-- Big -->
<div class="pagination big">
    <button class="page-btn prev">
        <i class="icon chevron-left w-6 h-6"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-6 h-6"></i>
    </button>
</div>

<!-- Primary -->
<div class="pagination primary">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<!-- Positive -->
<div class="pagination positive">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<!-- Negative -->
<div class="pagination negative">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<!-- Warning -->
<div class="pagination warning">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<!-- Purple -->
<div class="pagination purple">
    <button class="page-btn prev">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination">
    <button class="page-btn first" disabled>
        <i class="icon chevron-double-left w-4 h-4"></i>
    </button>
    <button class="page-btn prev" disabled>
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn active">1</button>
    <button class="page-btn">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
    <button class="page-btn last">
        <i class="icon chevron-double-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination loading">
    <button class="page-btn prev" disabled>
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn" disabled>
        <span class="loading-spinner"></span>
    </button>
    <button class="page-btn" disabled>
        <span class="loading-spinner"></span>
    </button>
    <button class="page-btn" disabled>
        <span class="loading-spinner"></span>
    </button>
    <button class="page-btn next" disabled>
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
</div>

<div class="pagination-container">
    <div class="pagination-info">
        <span class="total-items">Showing 11-20 of 245 results</span>
    </div>
    <div class="pagination primary grouped">
        <button class="page-btn first" aria-label="First page">
            <i class="icon chevron-double-left w-4 h-4"></i>
        </button>
        <button class="page-btn prev" aria-label="Previous page">
            <i class="icon chevron-left w-4 h-4"></i>
        </button>
        <button class="page-btn">1</button>
        <span class="ellipsis">...</span>
        <button class="page-btn">4</button>
        <button class="page-btn">5</button>
        <button class="page-btn active" aria-current="page">6</button>
        <button class="page-btn">7</button>
        <button class="page-btn">8</button>
        <span class="ellipsis">...</span>
        <button class="page-btn">25</button>
        <button class="page-btn next" aria-label="Next page">
            <i class="icon chevron-right w-4 h-4"></i>
        </button>
        <button class="page-btn last" aria-label="Last page">
            <i class="icon chevron-double-right w-4 h-4"></i>
        </button>
    </div>
    <div class="items-per-page">
        <label for="items-per-page">Items per page:</label>
        <select id="items-per-page" class="per-page-select">
            <option value="10" selected>10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>
</div>

<div class="pagination responsive">
    <!-- Mobile: Show only essential controls -->
    <button class="page-btn prev md:hidden">
        <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <span class="page-info md:hidden">2 / 16</span>
    <button class="page-btn next md:hidden">
        <i class="icon chevron-right w-4 h-4"></i>
    </button>
    
    <!-- Desktop: Show full pagination -->
    <div class="hidden md:flex pagination">
        <button class="page-btn first">
            <i class="icon chevron-double-left w-4 h-4"></i>
        </button>
        <button class="page-btn prev">
            <i class="icon chevron-left w-4 h-4"></i>
        </button>
        <button class="page-btn">1</button>
        <button class="page-btn active">2</button>
        <button class="page-btn">3</button>
        <button class="page-btn">4</button>
        <button class="page-btn">5</button>
        <span class="ellipsis">...</span>
        <button class="page-btn">16</button>
        <button class="page-btn next">
            <i class="icon chevron-right w-4 h-4"></i>
        </button>
        <button class="page-btn last">
            <i class="icon chevron-double-right w-4 h-4"></i>
        </button>
    </div>
</div>