/****************************
 * Pagination
****************************/
.px-pagination {--spacing:16px;}
.px-pagination-inner {border-top:1px solid rgb(206, 206, 206);}

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

.px-pagination ul.page-numbers li span.current,
.px-pagination ul.page-numbers li:not(:has(.dots)) a:hover,
.px-pagination ul.page-numbers li:not(:has(.dots)) span:hover {background:#222; color:var(--px-color-white);}

.px-pagination ul.page-numbers li a,
.px-pagination ul.page-numbers li span {
    transition:var(--px-transition);
    width:40px; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
}

/* items */
.px-pagination a, .px-pagination span {
    display:inline-flex; align-items:center; gap:4px; padding:5px; text-decoration:none;
    border-radius:50%; font-weight:700;
}

.px-pagination .page-next:hover,
.px-pagination .page-prev:hover {color:var(--px-color-permalink-highlight)}

/* current */
.px-pagination span.current {border-color:var(--px-color-primary); color:var(--px-color-white);}

/* disabled */
.px-pagination a.disabled {opacity:.3; pointer-events:none;}

/****************************
 * Pagination Responsive
****************************/
@media only screen and (max-width:1024px) {
    .px-pagination {--spacing:5px;}
}

@media only screen and (max-width:767px) {
    .px-pagination ul.page-numbers li a,
    .px-pagination ul.page-numbers li span {width:34px;}

    .px-pagination a, .px-pagination span {font-size:13px; padding:0; gap:7px;}
}

@media only screen and (max-width:480px) {
    .px-pagination .page-next span,
    .px-pagination .page-prev span {display:none;}
    .px-pagination-inner {justify-content:center; gap:20px;}
}