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

ul.pbuic-pager {
    margin: 2rem 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.pbuic-pager li {
    display: inline-block;
    margin: 0 .1em;
    vertical-align: top;
    font-size: var(--txtSize-6);
}

.pbuic-pager a,
.pbuic-pager span {
    display: block;
    width: 2.4em;
    height: 2.4em;
    margin: auto;
    border: 1px solid var(--clr1-offWhite);
    border-radius: var(--radius-sm);
    text-decoration: none;
    line-height: 2.4em;
    vertical-align: baseline;
    text-align: center;
    color: var(--clr1-normal);
    background: var(--clr1-offWhite);
}

.pbuic-pager a:hover,
.pgr-active span {
    background: transparent
}

.pgr-previous,
.pgr-next {
    position: relative;
}

.pgr-previous a,
.pgr-previous span,
.pgr-next a,
.pgr-next span {
    width: auto;
    padding-inline: .5em;
    overflow: hidden;
    border-color: var(--clr1-normal);
    white-space: nowrap;
    background: transparent;
}

.pgr-previous a:before,
.pgr-previous span:before,
.pgr-next a:after,
.pgr-next span:after {
    margin-inline: .5em;
    font-family: var(--fam-icon);
    font-weight: normal;
    line-height: 1;
}

.pgr-previous a:before,
.pgr-previous span:before {
    content: "\3c";
}

.pgr-next a:after,
.pgr-next span:after {
    content: "\3e";
}

.pgr-previous a:hover,
.pgr-next a:hover {
    background: var(--clr1-offWhite);;
}

.pgr-inactive {
    visibility: hidden;
    max-width: 3em;
}