/*	
--------------------------------------------------
Pagination navigation
-------------------------------------------------- 
*/

nav#pagination {
    padding: var(--base-spacing) 0;
}

nav#pagination .pagination {
    position: relative;
    margin: 0;
}

nav#pagination .pagination,
nav#pagination .pagination li a,
nav#pagination .pagination li a span {
    border-radius: 0;
}

nav#pagination .pagination li {
    margin:0 2.5px;
}

nav#pagination .pagination li.prev,
nav#pagination .pagination li.next { 
    font-size:18px;
}

nav#pagination .pagination li.prev { 
    margin-left:0;
}

nav#pagination .pagination li.next {
    margin-right:0;
}

nav#pagination .pagination li.prev,
nav#pagination .pagination li.next { 
    position: absolute;
}
nav#pagination .pagination li.prev { 
    left:0;
}
nav#pagination .pagination li.next {
    right:0;
}

nav#pagination .pagination li a {
    display:block;
    color: rgba(var(--base-link), 1);
    border-width: var(--btn-border-width);
    border-style: solid;
    border-color:  rgba(var(--base-borders), 1);
    border-radius: var(--base-border-radius);
    padding: 9px 16px;
    height:40px; min-width:40px;
    box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--true-black), 0);
}

nav#pagination .pagination li:not(.active) a:hover { 
    background-color: var(--base-borders);
    box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--true-black), var(--btn-box-shadow_o));
}

nav#pagination .pagination li.active a { 
    color: rgba(var(--base-highlight-text), 1);
    background-color: rgba(var(--base-highlight), 1);
    border-color:  rgba(var(--base-highlight), 1);
}

@media (min-width:576px) { 

    nav#pagination .pagination li a {
        padding: 14px 21px;
        height:50px; min-width:50px;
    }

}