// PAGINATION NUMBER
.paging-navigation {
    @extend %flex-item-center;
    justify-content: center;
    margin-top: rem(10px);

    .page-numbers {
        @extend %flex-item-center;
        justify-content: center;
        @include flex(40px);
        height: 40px;
        margin-bottom: 7px;
        background: rgba($primary_color, .20);
        font-family: $heading_font;
        font-weight: bold;
        color: $body_color;
        font-size: rem(14px);
        @include border-radius(999px);
        @include transition(all .3s ease);

        span {
            @extend %flex-item-center;
            font-size: rem(14px);
            line-height: normal;
        }

        &:hover {
            border-color: $hover_color;
            color: $hover_color;
        }

        &.current {
            background: $highlight_color;
            border-color: $highlight_color;
            color: $light_color;
        }

        &:not(:last-child) {
            margin-right: rem(10px);
        }

        &.next {
            @include flex(75px);

            span:after {
                content: '\ea4a';
                font-family: $icon_font;
                font-size: rem(16px);
            }
        }

        &.prev {
            @include flex(75px);

            span:before {
                content: '\ea49';
                font-family: $icon_font;
                font-size: rem(16px);
            }
        }
    }
}

// LOAD MORE
.wolfo-loadmore {
    .load-more {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        min-width: 140px;
        min-height: 40px;
        font-weight: normal;
        text-align: center;
        padding: rem(7px 20px);
        @include border-radius(999px);

        &:hover {
            color: $light_color;
            background: $hover_color;
        }
    }

    //== has show animate loading
    &.loading {
        .load-more {
            font-size: 0;

            &:before {
                content: '';
                display: inline-block;
                position: absolute;
                @include center-position();
                @include dot($bgColor: transparent, $color: transparent);
                box-shadow: 0 $-y1 0 0 $color-1,
                $x2 $-y2 0 0 $color-1,
                $x1 0 0 0 $color-1,
                $x2 $y2 0 0 $color-0,
                0 $y1 0 0 $color-0,
                $-x2 $y2 0 0 $color-0,
                $-x1 0 0 0 $color-0,
                $-x2 $-y2 0 0 $color-0;
                animation: dotSpin 1.5s infinite linear;
            }
        }
    }
}

// INFINITE SCROLL
.page-load-status {
    p {
        margin-bottom: 0;
    }

    .infinite-scroll-request {
        .ajax-loading {
            display: inline-block;
            color: $highlight_color;
            font-size: rem(36px);
            line-height: 1;

            i {
                @include animation(cssload-rotate 1.5s linear infinite);
            }
        }
    }
}