/**
 * @about: 	pbuic-pager.css - Layout for the Pager UI component of ProBase
 */

ul.pbuic-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 3em 0 2em;
    list-style: none;
    padding: 0;
}


.pbuic-pager a,
.pbuic-pager span {
    display: block;
    padding: 0.4em 0.8em;
    font-weight: bold;
    color: inherit;
}

.pgr-previous a,
.pgr-previous span,
.pgr-next a,
.pgr-next span {
    padding: 0;
}

.pgr-active span {
    border-radius: 2px;
    background: #f8f8f8;
    border: 1px solid #c0c0c0;
}

.pgr-previous a,
.pgr-previous span,
.pgr-next a,
.pgr-next span {
    width: 28px;
    height: 37px;
    overflow: hidden;
    visibility: hidden;
}

.pgr-previous a:before,
.pgr-previous span:before {
    transform: rotate(180deg);
}

.pgr-previous a:before,
.pgr-previous span:before,
.pgr-next a:before,
.pgr-next span:before {
    content: '';
    display: block;
    width: 28px;
    height: 37px;
    visibility: visible;
    background:url('../../img/beeldmerk.png') center;
    background-size: cover;
}

/** Hide arrow on first or last page */

.pgr-previous span,
.pgr-next span {
    display: none;
}