/*
 * Pagination of a back office table — added on top of what the maquette draws, see
 * `templates/admin/section/_pagination.html.twig`.
 *
 * No Figma frame to read this off, so the geometry follows the rest of the section screen rather
 * than a spec: the same gap the table's own cells use between its parts, the current page told by
 * the action colour rather than a border, so it reads at a glance among a row of plain numbers.
 */
.mo-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mo-spacing-sm);
    margin-top: var(--mo-spacing-sm);
}

.mo-admin-pagination__pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mo-admin-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--mo-spacing-xs);
    border-radius: var(--mo-radius-sm);
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-semibold);
    text-decoration: none;
}

a.mo-admin-pagination__page:hover {
    background-color: var(--mo-surface-default);
}

a.mo-admin-pagination__page:focus-visible {
    outline: 2px solid var(--mo-border-action);
    outline-offset: 2px;
}

.mo-admin-pagination__page--current {
    background-color: var(--mo-surface-action-dark);
    color: var(--mo-surface-default-white);
}

.mo-admin-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    color: var(--mo-text-placeholder);
}