@use '../abstracts' as *;

/**
 * Pagination Component
 * WordPress paginate_links() styling
 */

.presszone-comments-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $presszone-comments-spacing-sm;
    margin-top: $presszone-comments-spacing-xl;
    padding: $presszone-comments-spacing-lg $presszone-comments-spacing-zero;
    font-size: $presszone-comments-font-size-sm;

    // WordPress default classes
    .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: $presszone-comments-btn-size-md;
        height: $presszone-comments-btn-size-md;
        padding: $presszone-comments-spacing-xs $presszone-comments-spacing-sm;
        border-width: $presszone-comments-border-width;
        border-style: solid;
        border-radius: $presszone-comments-radius-md;
        text-decoration: none;
        font-weight: 500;
        transition: all $presszone-comments-duration-normal $presszone-comments-ease-smooth;

        @include theme-props(('background-color': 'bg-secondary',
                'border-color': 'border',
                'color': 'text-secondary'
            ));

        &:hover {
            border-color: $presszone-comments-accent;
            @include theme-props(('background-color': 'bg-hover',
                    'color': 'text-primary'
                ));
        }

        &.current {
            background-color: $presszone-comments-accent; // static
            color: $presszone-comments-bg-primary; // static
            border-color: $presszone-comments-accent;
            font-weight: 700;
            cursor: default;

            @include dark-mode {
                color: $presszone-comments-dark-bg-primary;
            }
        }

        &.dots {
            border: none;
            background: none;
            cursor: default;

            &:hover {
                background: none;
                border: none;
                @include theme-props(('color': 'text-muted'
                    ));
            }
        }

        &.prev,
        &.next {
            font-weight: 600;
            padding-inline-start: $presszone-comments-spacing-md;
            padding-inline-end: $presszone-comments-spacing-md;
        }
    }
}

// Empty state styling
.presszone-comments-empty {
    text-align: center;
    color: $presszone-comments-text-muted;
    padding: $presszone-comments-spacing-xxl;
    font-size: $presszone-comments-font-size-md;

    @include dark-mode {
        color: $presszone-comments-dark-text-muted;
    }
}

// Responsive adjustments
@media (max-width: 768px) {
    .presszone-comments-pagination {
        flex-wrap: wrap;
        gap: $presszone-comments-spacing-xs;

        .page-numbers {
            min-width: $presszone-comments-btn-size-sm;
            height: $presszone-comments-btn-size-sm;
            font-size: $presszone-comments-font-size-xs;

            &.prev,
            &.next {
                padding-inline-start: $presszone-comments-spacing-sm;
                padding-inline-end: $presszone-comments-spacing-sm;
            }
        }
    }
}