/**
 * @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 {
	margin: 2em auto 2em;
	padding: 0;
	border: 0;
	text-align: center;
    overflow: hidden;
	background-image: none;
	list-style: none;
}

.pbuic-pager li {
    position: relative;
	display: inline-block;
	width: auto;
	margin: 0 5px;
	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;
	padding: .2em .6em;
	margin: 0;
	text-align: center;
	border: 1px solid #fff;
	color: #333;
	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 {
    padding: .2em .6em .2em 1.5em;
}

.pbuic-pager .pgr-previous a:before,
.pbuic-pager .pgr-previous span:before,
.pbuic-pager .pgr-next a:before,
.pbuic-pager .pgr-next span:before {
    content: '▶';
	position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -.7em;
}

.pbuic-pager .pgr-previous a:before,
.pbuic-pager .pgr-previous span:before {
	content: '◀';
    right: auto;
    left: 5px;
}

.pbuic-pager .pgr-next a,
.pbuic-pager .pgr-next span {
	padding: .2em 1.5em .2em .6em;
}

/**
 * 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 {
	opacity: .7;
}

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

.pbuic-pager .pgr-space span {
    content: '…';
    display: block;
    width: 5px;
    height: 18px;

}

/**
 * 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;
    }
}