@alifd/next/es/pagination/scss/mixin.scss

// pagination mixins
// --------------------------------------------------

@mixin pagination-size(
    $direction,
    $itemSplit,
    $itemPaddingLeftRight,
    $itemBorderWidth,
    $itemCorner,
    $ellipsisSize,
    $totalFontSize,
    $currentFontSize,
    $otherFontSize,
    $pageHeihgt,
    $numberPaddingLeftRight,
    $inputWidth
) {
    #{$pagination-prefix}-list {
        margin: 0 $itemSplit;
    }
    #{$pagination-prefix}-total {
        line-height: $pageHeihgt;
        vertical-align: middle;
    }
    #{$pagination-prefix}-item {
        padding: 0 $itemPaddingLeftRight;
        border-width: $itemBorderWidth;
        border-radius: $itemCorner;
        & + #{$pagination-prefix}-item {

            @if $direction == 'rtl' {
                margin: 0 $itemSplit 0 0;
            } @else {
                margin: 0 0 0 $itemSplit;
            }
        }
    }
    #{$pagination-prefix}-ellipsis {
        height: $pageHeihgt;
        line-height: $pageHeihgt;
        @include icon-size(
            $size: $ellipsisSize,
            $marginLeft: $pagination-ellipsis-margin,
            $marginRight: $pagination-ellipsis-margin
        );
    }
    #{$pagination-prefix}-display {
        font-size: $totalFontSize;
        em {
            font-size: $currentFontSize;
        }
    }
    #{$pagination-prefix}-jump-text {
        font-size: $otherFontSize;
    }
    #{$pagination-prefix}-jump-input {
        width: $inputWidth;
    }
    #{$pagination-prefix}-size-selector-title {
        height: $pageHeihgt;
        line-height: $pageHeihgt;
        font-size: $otherFontSize;
        vertical-align: middle;
    }
    #{$pagination-prefix}-size-selector-btn {
        padding: 0 $numberPaddingLeftRight;
    }
    #{$pagination-prefix}-item {
        &.#{$css-prefix}prev:not([disabled]) i,
        &.#{$css-prefix}next:not([disabled]) i {
            color: $pagination-arrow-color;
        }
        &:hover {
            &.#{$css-prefix}prev:not([disabled]) i,
            &.#{$css-prefix}next:not([disabled]) i {
                color: $pagination-arrow-hover-color;
            }
        }
    }
}

@mixin arrow-only-size(
    $prevNextWidth
) {
    #{$pagination-prefix}-item {
        &.#{$css-prefix}prev,
        &.#{$css-prefix}next {
            width: $prevNextWidth;
            padding: 0;
            .#{$css-prefix}icon {
                margin: 0 auto;
            }
        }
    }
}

@mixin arrow-prev-only-size(
    $prevWidth
) {
    #{$pagination-prefix}-item.#{$css-prefix}prev {
        width: $prevWidth;
        padding: 0;
        .#{$css-prefix}icon {
            margin: 0 auto;
        }
    }
}

@mixin no-border-size(
    $displayMarginLeftRight
) {
    #{$pagination-prefix}-item {
        &.#{$css-prefix}prev,
        &.#{$css-prefix}next {
            padding: 0;
            border: none;
            background-color: transparent;
            box-shadow: none;
            .#{$css-prefix}icon {
                margin: 0;
            }
        }

        &.#{$css-prefix}prev:not([disabled]):hover i,
        &.#{$css-prefix}next:not([disabled]):hover i {
            color: $pagination-arrow-hover-color-noboder;
        }
    }

    #{$pagination-prefix}-display {
        margin: 0 $displayMarginLeftRight;
    }
}

@mixin mini-size(
    $prevNextMarginLeftRight
) {
    #{$pagination-prefix}-item {
        &.#{$css-prefix}prev {
            margin-right: $prevNextMarginLeftRight;
        }
        &.#{$css-prefix}next {
            margin-left: $prevNextMarginLeftRight;
        }
    }
}