/**
 * Defaults, resetting default list layout and adding layout of the pager element
 */

.pbuic-pager {
    overflow: hidden;
    margin: 0;
    padding-bottom: 1.5em;
    list-style: none;
}

.pbuic-pager li {
    display: none;
}

.pbuic-pager a {
    display: block;
    text-decoration: none;
    color: #4781ca;
}

.pbuic-pager .pgr-previous,
.pbuic-pager .pgr-next {
    display: block;
}

.pbuic-pager .pgr-previous {
    position: relative;
    float: left;
    padding-left: 20px;
}

.pbuic-pager .pgr-previous a:after {
    position: absolute;
    content: "\2190";
    left: 0;
}

.pbuic-pager .pgr-next {
    position: relative;
    float: right;
    padding-right: 20px;
}

.pbuic-pager .pgr-next a:after {
    position: absolute;
    content: "\2192";
    right: 0;
}

/**
 * Hover state
 */

.pbuic-pager a:hover {
    text-decoration: underline;
}

/**
 * Inactive state
 */

.pbuic-pager .pgr-inactive {
    display: none;
}

.pbuic-pager-container {
    container: pbuic-pager / inline-size;
}

@container pbuic-pager (max-width: 400px) {
    .pbuic-pager-container .pbuic-pager li {
        display: none;
    }
}