/****************************
 * Pagination
****************************/
/* General */
.vii-pagination {--spacing:25px;border-top:1px solid rgba(21, 68, 119, .15);}
.vii-pagination ul.page-numbers {margin:0 var(--spacing); gap:18px;}

.vii-pagination a, .vii-pagination span {
    padding:5px;width:32px;height:32px;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    color:var(--vii-color-dark-3);
}
.vii-pagination a::before,
.vii-pagination span::before {
    content:""; position:absolute; inset:0;z-index:-1;opacity:0;transition:all .3s ease;
    background-image:linear-gradient(to right, var(--vii-color-blue) 0%, var(--vii-color-light-blue-2) 100%);
}

/* Arrows */
.vii-pagination .page-arrow {color:var(--vii-color-blue);}

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

/* current and hover */
.vii-pagination span.current,
.vii-pagination a:hover,
.vii-pagination a:not(.disabled):focus {color:var(--vii-color-white);}
.vii-pagination span.current::before,
.vii-pagination a:hover::before,
.vii-pagination a:not(.disabled):focus::before {opacity:1}


/****************************
 * Pagination Responsive
****************************/
@media only screen and (max-width:1024px) {
    .vii-pagination {--spacing:20px;}
    .vii-pagination ul.page-numbers {gap:14px;}
}

@media only screen and (max-width:480px) {
    .vii-pagination {--spacing:10px;}
    .vii-pagination ul.page-numbers {gap:5px;}
}