/* 
 * Pagination Styles for Pleb PHP
 * Provides consistent pagination controls throughout applications using the PaginationRenderer
 * Leverages Bootstrap 5's CSS custom properties for styling
 */

/* Override Bootstrap pagination variables with our theme colors */
.pagination {
    --bs-pagination-color: var(--primary);
    --bs-pagination-bg: var(--light);
    --bs-pagination-border-color: var(--secondary);
    
    --bs-pagination-hover-color: var(--light);
    --bs-pagination-hover-bg: var(--primary-dark, color-mix(in srgb, var(--primary) 60%, black 40%));
    --bs-pagination-hover-border-color: var(--primary);
    
    --bs-pagination-active-color: var(--light);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    
    --bs-pagination-disabled-color: var(--secondary-dark, var(--dark));
    --bs-pagination-disabled-bg: var(--light);
    --bs-pagination-disabled-border-color: var(--secondary);
}

/* Ensure ellipsis (...) matches other disabled states */
.pagination .page-item.disabled span.page-link {
    color: var(--bs-pagination-disabled-color);
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* .pagination {
        --bs-pagination-padding-x: 0.5rem;
        --bs-pagination-padding-y: 0.25rem;
    } */
    
    .pagination-sm {
        /* --bs-pagination-padding-x: 0.35rem;
        --bs-pagination-padding-y: 0.15rem; */
        --bs-pagination-font-size: 0.875rem;
    }
}