/* Listing pagers (inbox, users, sent emails, quiz respondents): Previous, "Page x of y", Next.
   The buttons match the blog's prev/next buttons: Previous plain, Next filled with the primary colour. */

.pagination,
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
}

.pagination-info {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1rem;
    border-radius: var(--brand-shape-full);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 5px color-mix(in oklab, var(--md-sys-color-shadow), transparent 92%);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.pagination-prev {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
}

.pagination-next {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.pagination-prev::before {
    content: "← " / "";
    white-space: pre;
}

.pagination-next::after {
    content: " →" / "";
    white-space: pre;
}

a.pagination-btn:hover,
a.pagination-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px color-mix(in oklab, var(--md-sys-color-shadow), transparent 85%);
}

a.pagination-next:hover,
a.pagination-next:focus-visible {
    filter: brightness(1.05);
}

.pagination-btn.disabled {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: none;
    pointer-events: none;
}

@media (max-width: 480px) {
    .pagination-btn {
        padding: 0.5rem 0.75rem;
    }
}