/* tambahkan juga di AppServiceProvider */
.pagination {
    --pagination-padding-x: 0.75rem;
    --pagination-padding-y: 0.375rem;
    --pagination-font-size: 1rem;

    --pagination-color: #b3202c;
    --pagination-bg: #fff;
    --pagination-border-width: 1px;
    --pagination-border-color: #dee2e6;
    --pagination-border-radius: 0.375rem;

    --pagination-hover-color: #8c1822;
    --pagination-hover-bg: #e9ecef;
    --pagination-hover-border-color: #dee2e6;

    --pagination-focus-color: #8c1822;
    --pagination-focus-bg: #e9ecef;
    --pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

    --pagination-active-color: #fff;
    --pagination-active-bg: #b3202c;
    --pagination-active-border-color: #b3202c;

    --pagination-disabled-color: #6c757d;
    --pagination-disabled-bg: #fff;
    --pagination-disabled-border-color: #dee2e6;

    display: flex;
    padding-left: 0;
    list-style: none;
    margin: 1rem 0;
}

/* =========================================
   PAGE ITEM
   ========================================= */

.page-item {
    display: block;
}

/* =========================================
   PAGE LINK
   ========================================= */

.page-link {
    position: relative;
    display: block;

    padding: var(--pagination-padding-y)
        var(--pagination-padding-x);

    font-size: var(--pagination-font-size);

    color: var(--pagination-color);
    text-decoration: none;

    background-color: var(--pagination-bg);

    border: var(--pagination-border-width) solid
        var(--pagination-border-color);

    margin-left: -1px;

    line-height: 1.5;

    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

/* =========================================
   HOVER
   ========================================= */

.page-link:hover {
    z-index: 2;

    color: var(--pagination-hover-color);

    background-color: var(--pagination-hover-bg);

    border-color: var(--pagination-hover-border-color);

    text-decoration: none;
}

/* =========================================
   FOCUS
   ========================================= */

.page-link:focus {
    z-index: 3;

    color: var(--pagination-focus-color);

    background-color: var(--pagination-focus-bg);

    outline: 0;

    box-shadow: var(--pagination-focus-box-shadow);
}

/* =========================================
   ACTIVE
   ========================================= */

.page-item.active .page-link {
    z-index: 3;

    color: var(--pagination-active-color);

    background-color: var(--pagination-active-bg);

    border-color: var(--pagination-active-border-color);
}

/* =========================================
   DISABLED
   ========================================= */

.page-item.disabled .page-link {
    color: var(--pagination-disabled-color);

    pointer-events: none;

    background-color: var(--pagination-disabled-bg);

    border-color: var(--pagination-disabled-border-color);

    opacity: 0.65;
}

/* =========================================
   FIRST PAGE
   ========================================= */

.page-item:first-child .page-link {
    margin-left: 0;

    border-top-left-radius:
        var(--pagination-border-radius);

    border-bottom-left-radius:
        var(--pagination-border-radius);
}

/* =========================================
   LAST PAGE
   ========================================= */

.page-item:last-child .page-link {
    border-top-right-radius:
        var(--pagination-border-radius);

    border-bottom-right-radius:
        var(--pagination-border-radius);
}

/* =========================================
   ELLIPSIS
   ========================================= */

.page-item span.page-link {
    cursor: default;
}

/* =========================================
   PAGINATION SIZES
   ========================================= */

.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.pagination-lg .page-link {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
}

/* =========================================
   CENTER
   ========================================= */

.pagination-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* =========================================
   OPTIONAL: SHADOW
   ========================================= */

.pagination-shadow .page-link {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}