[data-pagination] {
    display: flex;
    align-items: center;
    --pagination-border-radius: 5px;
}

[data-pagination] .pagination-button[data-page] {
    width: 40px; /* Fixed width for all buttons */
    padding: .25rem .5rem;
    border-width: 1px;
    border-style: solid;
    border-color :#ccc;
    background-color: #ffffff;
    cursor: pointer;
    text-align: center;
}

[data-pagination] .pagination-button[data-page] + .pagination-button[data-page] {
    border-left-style: none;
}
[data-pagination] [data-pages] .pagination-button[data-page]:first-child {
    border-left-style: none;
}
[data-pagination] [data-pages] .pagination-button[data-page]:last-child {
    border-right-style: none;
}


[data-pagination] > [data-page]:first-child {
    border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius);
}
[data-pagination] > [data-page]:last-child {
    border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0;
}

[data-pagination] .pagination-button.active {
    background-color: #007bff;
    color: white;
}

[data-pagination] .pagination-button:disabled {
    /* background-color: #e9e9e9; */
    cursor: not-allowed;
}

/* Specific rule for number buttons */
[data-pagination] [data-pages] .pagination-button {
    width: 30px; /* Fixed width specifically for page number buttons */
    font-variant-numeric: tabular-nums; /* Use tabular figures for uniform width */
}

[data-pages] span {
    display: inline-block;
    width: 30px; /* Align ellipsis with the width of page number buttons */
    text-align: center;
}