// Pagination styles for dark theme
@mixin dark-theme-pagination {
    .pagination,
    &.pagination {
        background-color: $dark;

        // Dropdown item hover
        .page-item {
            // Add hover for the page item
            &:hover {
                background-color: generate-shade($dark, 10, "lighten");
            }

            // Link styles for the dark theme mode
            .page-link {
                color: $light;
            }

            // Disabled item page styles
            &.disabled {
                $disabled-color-dark-theme: generate-shade($disabled-color, 50, 'darken');

                background-color: $disabled-color-dark-theme !important;
                color: $light !important;

                a, .page-link {
                    color: $light !important;
                }


                &:hover {
                    background-color: $disabled-color-dark-theme !important;
                }
            }
        }
    }
}

// Pagination styles for light theme
@mixin light-theme-pagination {
    .pagination,
    &.pagination {
        background-color: $light;

        // Dropdown item hover
        .page-item {
            // Add hover for the page item
            &:hover {
                background-color: generate-shade($light, 10, "darken");
            }

            // Disabled item page styles
            &.disabled {
                background-color: $disabled-color !important;
                color: $dark !important;

                a, .page-link {
                    color: $dark !important;
                }


                &:hover {
                    background-color: $disabled-color !important;
                }
            }
        }
    }
}

// Base pagination styles
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    @include light-theme-pagination;
    @include base-border-style;

    // Pagination item styles
    .page-item {
        cursor: pointer;
        padding: $base-padding/2 $base-padding;
        @include base-border-style;
        border-top: none;
        border-bottom: none;
        border-left: none;
        border-radius: 0;
        transition: background-color $base-transition-time ease;

        // Disabled item page styles
        &.disabled {
            cursor: default !important;

            a {
                cursor: default !important;
            }
        }

        // Page active styles
        &.active {
            @include active-object-color();
        }

        // Disable border styles for the last page-item
        &:last-child {
            border-right: none;
        }
    }
}


// Apply different theme styles
body[data-theme="dark"] {
    @include dark-theme-pagination;
}

body[data-theme="light"] {
    @include light-theme-pagination;
}

.pagination[data-theme="dark"] {
    @include dark-theme-pagination;
}

.pagination[data-theme="light"] {
    @include light-theme-pagination;
}