:root {
	--lightBlue: #00ade5;
	--darkBlue: #1a226d;
	--lightGrey: #e5e5e5;
	--darkGrey: #555;
	--extraDarkGrey: #231f20;
	--black: #111;
}

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

ul.pbuic-pager {
	overflow: hidden;
	margin: .5em 0 1em;
	padding: 0;
	list-style: none;
	text-align: center;
}

.pbuic-pager li {
	display: inline-block;
	margin: 0 .15em;
}

.pbuic-pager .pgr-next {
	margin-right: 0;
}

.pbuic-pager a,
.pbuic-pager span {
	display: block;
	min-width: 23px;
	padding: 0 2px;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 2px;
	line-height: 23px;
	text-align: center;
	text-decoration: none;
	color: #555;
}

.pbuic-pager .pgr-previous a,
.pbuic-pager .pgr-previous span,
.pbuic-pager .pgr-next a,
.pbuic-pager .pgr-next span {
	width: auto;
}

.pbuic-pager .pgr-previous a,
.pbuic-pager .pgr-previous span,
.pbuic-pager .pgr-next a,
.pbuic-pager .pgr-next span {
	background: transparent url(pbuic-pager-sprite.png) no-repeat 2px 7px;
}

.pbuic-pager .pgr-previous a,
.pbuic-pager .pgr-previous span {
	padding: 0 5px 0 22px;
}

.pbuic-pager .pgr-next a,
.pbuic-pager .pgr-next span {
	padding: 0 22px 0 5px;
	background-position: 100% -13px;
}

/**
 * Hover state
 */

.pbuic-pager a:hover {
	border-color: #f2f2f2;
	color: #00ade5;
	background-color: #f2f2f2;
}

/**
 * Active state
 */

.pbuic-pager .pgr-active span {
	border-color: #00ade5;
	font-weight: bold;
	color: #fff;
	background-color: #00ade5;
}

/**
 * Inactive state
 */

.pbuic-pager .pgr-inactive {
	color: #ccc;
}

.pbuic-pager .pgr-previous .pgr-inactive {
	background-position: 2px -33px;
}

.pbuic-pager .pgr-next .pgr-inactive {
	background-position: 100% -53px;
}

/**
 * Spacers ("...")
 */

.pbuic-pager .pgr-space span {
	display: block;
	width: 5px;
	min-width: 5px;
	background: transparent url(pbuic-pager-sprite.png) no-repeat 2px -83px;
	text-indent: -999em;
}

/**
 * Add support for the "arrows only" pager variant
 */

.pgr-small-arrows .pgr-previous a,
.pgr-small-arrows .pgr-next a,
.pgr-small-arrows .pgr-previous span,
.pgr-small-arrows .pgr-next span {
	display: block;
	padding: 0;
	width: 14px;
	text-indent: -999em;
}

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

@container pbuic-pager (max-width: 500px) {
    .pbuic-pager-container .pgr-previous a,
    .pbuic-pager-container .pgr-next a,
    .pbuic-pager-container .pgr-previous span,
    .pbuic-pager-container .pgr-next span {
        display: block;
        padding: 0;
        width: 14px;
        text-indent: -999em;
    }
}