/* MIDDLE PAGINATION */

.pagination-middle {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 30px 0;
    width           : 100%
}

.pagination-middle .pagination {
    display : inline-block
}

.pagination-middle .pagination .page-numbers {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 36px;
    width           : 36px;
    margin          : 0 2px;
    color           : var(--text);
    float           : left;
    border-radius   : var(--rounded-sm);
    border          : 1px solid var(--border);
}

.pagination-middle .pagination .page-numbers.current {
    background-color : #D92950;
    color            : var(--white);
    font-weight      : 600
}

.pagination-middle .pagination .page-numbers.hidden {
    display : none
}

.pagination-middle .pagination .page-numbers.next svg,
.pagination-middle .pagination .page-numbers.previous svg {
    height : 22px;
    width  : 22px
}

.pagination-middle .pagination .page-numbers.next {
    margin-left : 12px
}

.pagination-middle .pagination .page-numbers.previous {
    margin-right : 12px
}

.pagination-middle .pagination .page-numbers:hover:not(.active) {
    background-color : #D92950;
    color            : var(--white)
}

.number-of-results {
    margin-bottom : 30px;
}

/* SIDE PAGINATION */

.pagination-side {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 30px 0;
}
.pagination-side .pagination {
    display         : inline-flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
}
.pagination-side .pagination .pagination-right {
    display     : flex;
    align-items : center;
}
.pagination-side .pagination .count {
    margin-right : 10px;
}
.pagination-side .pagination a {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    height           : 36px;
    padding          : 5px;
    width            : 36px;
    margin           : 0 2px;
    color            : var(--text);
    float            : left;
    border-radius    : var(--rounded-full);
    background-color : var(--zinc-100);
}
.pagination-side .pagination a svg {
    height  : 20px;
    width   : 20px;
}
.pagination-side .pagination a:hover {
    background-color : var(--slate-100);
    color            : var(--primary);
}
.pagination-side .pagination a.disabled {
    pointer-events : none;
}

.pagination-side .previous-link svg {
    margin-right: 4px;
}
.pagination-side .next-link svg {
    margin-left: 4px;
}

.pagination-side .number-of-results {
    margin-bottom : 0;
}