/****************************
 * Pagination
****************************/
.bb-pagination {
    --tp-gap:45px;
    --tp-spacing:60px;
    --tp-width:56px;
    --tp-size-icon:14px;
}

.bb-pagination ul {list-style:none; margin:0 var(--tp-spacing); display:flex; gap:var(--tp-gap);}
.bb-pagination ul li {padding:0;}

/* arrow */
.page-arrow {
    width:var(--tp-width); background:#fff; filter:drop-shadow(0px 0px 20px rgba(0, 0, 0, .1));
    font-size:var(--tp-size-icon); color:var(--bb-color-primary);
}
.page-arrow:hover, .page-arrow:focus {background:var(--bb-color-primary); color:#fff;}
.page-arrow:focus-visible {border-radius:50%;}

/* Number */
.page-numbers {font-size:var(--bb-size-16); color:var(--bb-color-primary);}
a.page-numbers:hover, a.page-numbers:focus {text-decoration:underline;}
.page-numbers.current {font-weight:700;}

/* disabled */
.bb-pagination a.disabled {opacity:.5; pointer-events:none;}

/****************************
 * Pagination Responsive
****************************/
@media only screen and (max-width:768px) {
    .bb-pagination {
        --tp-spacing:40px;
        --tp-gap:20px;
        --tp-width:50px;
    }
}
@media only screen and (max-width:480px) {
    .bb-pagination {
        --tp-spacing:20px;
        --tp-gap:10px;
        --tp-width:40px;
        --tp-size-icon:12px;
    }
}