/**
 * @author: Kars Kremers
 * @author: Peter Slagter
 * @about: 	pbuic-pager.css - Layout for the Pager UI component of ProBase
 */

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

ul.pbuic-pager {
	height: 18px;
	margin: 1em 0;
	padding: 0;
	border: 0;
	background-image: none;
	list-style: none;
}

.pbuic-pager li {
	float: left;
	width: auto;
	margin: 0 1px 0 0;
	padding: 0;
	border: 0;
	background-image: none;
}

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

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

.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 4px;
}

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

.pbuic-pager .pgr-next a,
.pbuic-pager .pgr-next span {
	padding: 0 17px 0 1px;
	background-position: 100% -16px;
}

/**
 * Hover state
 */

.pbuic-pager a:hover {
	border-color: #e7e7e7;
	color: #000;
}

/**
 * Active state
 */

.pbuic-pager .pgr-active span {
	background-color: #eeeeee;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#eee)); /** for webkit browsers */
	background: -moz-linear-gradient(top, #f8f8f8, #eee); /** for firefox 3.6+ */
	border-color: #dfdfdf;
	font-weight: bold;
	color: #000;
}

/**
 * Inactive state
 */

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

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

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

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

.pbuic-pager .pgr-space span {
	display: block;
	width: 5px;
	height: 18px;
	background: transparent url(pbuic-pager-sprite.png) no-repeat 0 -86px;
	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: 400px) {
    .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;
    }
}