/**
 * Pagination Component
 *
 * Bottom navigation bar for page navigation.
 *
 * Usage:
 *   <div class="pagination">
 *     <a href="..." class="pagination-btn">Prev</a>
 *     <span class="page-info">...</span>
 *     <a href="..." class="pagination-btn">Next</a>
 *   </div>
 *
 * Dependencies:
 *   - base.css (for CSS custom properties)
 */

/* ==========================================================================
   Pagination Container
   ========================================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background-color: var(--color-bg-medium, #0f0f11);
    border-top: 1px solid var(--color-border, #1a1a1d);
}

/* ==========================================================================
   Pagination Buttons
   ========================================================================== */

.pagination .pagination-btn {
    padding: 8px 20px;
    background-color: var(--color-bg-light, #141416);
    color: var(--color-text-secondary, #888);
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--color-border-light, #1f1f22);
    border-radius: var(--radius-sm, 3px);
    transition: all var(--transition-fast, 0.15s) ease;
}

.pagination .pagination-btn:hover {
    border-color: var(--color-border-accent, #3c2a5e);
    color: var(--color-accent, #a78bfa);
}

.pagination .pagination-btn.disabled {
    color: var(--color-text-disabled, #333);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   Page Info
   ========================================================================== */

.pagination .page-info {
    color: var(--color-text-muted, #666);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}