/* Public GnuBoard list pagination shared by every board.php?bo_table=... page. */
.pg_wrap,
.pg_wrap * {
    box-sizing: border-box;
}

.pg_wrap {
    --board-pagination-action: var(--mobile-ui-action-primary, var(--pc-ui-action-primary, #0077b8));
    --board-pagination-action-pressed: var(--mobile-ui-action-pressed, var(--pc-ui-action-pressed, #043b8b));
    --board-pagination-selected: var(--mobile-ui-selected, var(--pc-ui-brand-soft, #e7f5fe));
    --board-pagination-ink: var(--mobile-ui-ink, var(--pc-ui-ink, #212529));
    --board-pagination-muted: var(--mobile-ui-muted, var(--pc-ui-muted, #495057));
    --board-pagination-line: var(--mobile-ui-line, var(--pc-ui-line, #dee2e6));
    clear: both;
    width: 100%;
    margin: var(--board-ui-major-gap, 1.5rem) 0 0;
    padding: 0;
    text-align: center;
}

.pg_wrap .pg {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--board-ui-dense-gap, 0.25rem);
}

.pg_wrap .pg_page,
.pg_wrap .pg_current {
    display: inline-flex;
    min-width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 0.625rem;
    border: 1px solid var(--board-pagination-line);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--board-pagination-muted);
    font: inherit;
    font-size: var(--board-ui-type-action-size, 0.875rem);
    font-weight: var(--board-ui-type-meta-weight, 500);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    vertical-align: middle;
}

.pg_wrap .pg_page:hover {
    border-color: var(--board-pagination-action);
    background: var(--board-pagination-selected);
    color: var(--board-pagination-action);
}

.pg_wrap .pg_page:focus-visible {
    outline: 2px solid var(--board-pagination-action-pressed);
    outline-offset: 2px;
}

.pg_wrap .pg_current {
    border-color: var(--board-pagination-action);
    background: var(--board-pagination-action);
    color: #fff;
    font-weight: 600;
}

.pg_wrap .pg_start,
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_end {
    color: var(--board-pagination-ink);
    font-size: var(--board-ui-type-meta-size, 0.8125rem);
}

@media (max-width: 640px) {
    .pg_wrap {
        margin-top: var(--board-ui-major-gap, 1.5rem);
    }

    .pg_wrap .pg {
        gap: var(--board-ui-dense-gap, 0.25rem);
    }

    .pg_wrap .pg_page,
    .pg_wrap .pg_current {
        min-width: 2.75rem;
        height: 2.75rem;
        padding: 0 0.5rem;
        font-size: var(--board-ui-type-action-size, 0.8125rem);
    }
}