.pagination {
    @each $key, $value in $theme-colors {
        &.pagination-#{$key} {
            .page-item.active {
                .page-link {
                    background-color: $value;
                    border-color: $value;
                    box-shadow: 0 2px 5px rgba($value,.3);
                }
            }
        }
    }
}
.page-item {
    &:not(.active) {
        .page-link {
            &:hover {
                color: $pagination-hover-color
            }
        }
    }
    i, svg {
        font-size: 13px;
        width: 13px;
        height: 13px;
    }
    .page-link {
        font-size: .875rem;
        &:focus {
            box-shadow: none;
        }
    }
    &:first-child {
        margin-right: .4rem;
    }
    &:last-child {
        margin-left: .4rem;
    }
}
html[data-bs-theme="dark"] {
  .pagination .page-link {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
  }
  .pagination .page-item.active .page-link {
    background-color: #1976d2 !important;
    color: #fff !important;
    border-color: #1565c0 !important;
  }
}