// pagination  
.pagination {
    flex-wrap: wrap !important;
    a {
        padding: .65rem 1rem;
        border: 1px solid $border-color;
    }

    .page-link,
    li a {
        color: inherit !important;
        background-color: $white !important;
        border-color: $gray-100 !important;
        font-size: $font-size-sm;
        font-weight: 500;
        display: block;
        margin: .45rem;
        border-radius: $border-radius;

        &:hover,
        &:focus {
            border-color: $primary !important;
            background-color: $primary !important;
            color: $white !important;
        }
    }

    .active .page-link,
    .active a {
        color: $white !important;
        border-color: $primary !important;
        background-color: $primary !important;
    }

    li:first-child a {
        border-top-left-radius: .2rem;
        border-bottom-left-radius: .2rem;
    }

    li:last-child a {
        border-top-right-radius: .2rem;
        border-bottom-right-radius: .2rem;
    }
}
.pagination-light {
    .page-link,
    li a {
        color: inherit !important;
        background-color: $gray-200 !important;
        border-color: $gray-200 !important; 

        &:hover,
        &:focus {
            border-color: $primary !important;
            background-color: $primary !important;
            color: $white !important;
        }
    }
}

.pagination-shadow {
    .page-link,
    li a {
        color: inherit !important;
        background-color: $white !important;
        border-color: $white !important; 
        box-shadow: $box-shadow-sm;

        &:hover,
        &:focus {
            border-color: $primary !important;
            background-color: $primary !important;
            color: $white !important;
        }
    }
}
.pagination-sm a {
    padding: .2195rem .5rem;
}

.pagination-xs a {
    padding: 0 .35rem;
    line-height: 1.5;
}