/*
 * Paginering onder een archief of zoekresultaat.
 */

.paginering {
    margin-top: var(--ruimteXl);
}

.pagineringLijst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ruimteXs);
}

/*
 * paginate_links() levert een <a class="page-numbers"> voor een link en een
 * <span class="page-numbers current"> voor de huidige pagina. Die klassenamen
 * komen uit WordPress en zijn daarom niet in camelCase: ze zijn niet van dit
 * thema en veranderen zou betekenen dat de uitvoer nabewerkt moet worden.
 */
.pagineringItem .page-numbers {
    display: grid;
    min-width: 38px;
    height: 38px;
    place-items: center;
    padding-inline: 0.625rem;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randMd);
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    text-decoration: none;
    transition:
        border-color var(--duurSnel) ease,
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.pagineringItem a.page-numbers:hover,
.pagineringItem a.page-numbers:focus-visible {
    border-color: var(--kleurBlauw);
    color: var(--kleurBlauw);
}

.pagineringItem .page-numbers.current {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
    font-weight: 500;
}

.pagineringItem .page-numbers.dots {
    border-color: transparent;
    color: var(--kleurTekstZacht);
}