/* Постраничник (Navigation/Pager.razor) — общий для каталога, галереи и
   «Понравившихся». */

/* Постраничник под сеткой: ряд кнопок и строка о том, что сейчас на экране.
   По центру — он относится ко всей сетке над ним, а не к её краю. */
.vx-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.vx-pager__pages {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Номер — кнопка ростом со стрелки рядом. Цифры моноширинные и с табличными
   знаками: иначе ряд дёргается по ширине, когда «9» сменяется на «10». */
.vx-pager__page {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font: var(--type-mono);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: var(--transition-control);
}

.vx-pager__page:hover {
    background: var(--ghost-hover);
    color: var(--text-1);
}

/* Текущая — выпуклая, как активный сегмент: это единственная нажатая кнопка
   ряда, и отличать её одним цветом текста на тёмном мало. */
.vx-pager__page--on {
    background: var(--surface-2);
    border-color: var(--border-2);
    box-shadow: var(--inset-top);
    color: var(--text-1);
    cursor: default;
}

.vx-pager__gap {
    padding: 0 2px;
    color: var(--text-3);
    font: var(--type-mono);
}

.vx-pager__range {
    font: var(--type-caption);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}