@import "../lib.less";
@import "../variables/components/pagination.less";

.@{veui-prefix}-pagination {
    font-size: @veui-pagination-font-size-s;

    .make-simple-left(@size) {
        .next-page {
            @margin-left: ~"veui-pagination-simple-button-spacing-@{size}";
            margin-left: @@margin-left;
        }
    }

    &-simple[ui~="s"] {
        .make-simple-left(s);
    }

    &-simple[ui~="m"] {
        .make-simple-left(m);
    }

    &,
    &-info,
    &-pages,
    &-switch,
    &-size,
    & .@{veui-prefix}-link {
        display: inline-flex;
        align-items: center;
    }

    &-size { // 30 条/页
        margin-left: @veui-pagination-spacing-2;
        span {
            display: inline-block;
            color: @veui-pagination-pagesizes-text-font-color;
            line-height: @veui-pagination-pagesizes-text-line-height;
        }
        .@{veui-prefix}-select {
            width: auto;
            flex-grow: 0;
        }
    }

    &-total { // 共500条
        color: @veui-pagination-pagesizes-text-font-color;
    }

    & &-goto { // 跳至 确定
        display: flex;
        align-items: center;
        margin-left: @veui-pagination-page-items-margin-after;

        .@{veui-prefix}-input {
            width: @veui-pagination-goto-input-width-s;
            .padding(_, @veui-pagination-goto-input-padding-x);
            &-input {
                text-align: right;
            }
        }

        .@{veui-prefix}-button {
            display: none;
        }

        &-label-before,
        &-label-after {
            display: block;
            line-height: @veui-pagination-pagesizes-text-line-height;
            color: @veui-pagination-pagesizes-text-font-color;
        }

        &-label-before {
            margin-right: @veui-pagination-goto-label-spacing;
        }

        &-label-after {
            margin-left: @veui-pagination-goto-label-spacing;
        }
    }

    &-pages { // 1, 2, 3 ……
        list-style: none;
        margin: 0 @veui-pagination-button-spacing;
        padding: 0;
    }

    &-page + &-page {
        margin-left: @veui-pagination-button-spacing;
    }

    .make-metrics(@size) {
        @height: ~"veui-pagination-button-min-width-@{size}";
        @radius: ~"veui-pagination-button-border-radius-@{size}";
        @min-width: ~"veui-pagination-button-min-width-@{size}";
        height: @@height;
        min-width: @@min-width;
        border-radius: @@radius;
    }

    .@{veui-prefix}-link {
        .padding(_, @veui-pagination-button-padding-x);
        .make-metrics(s);
        font-size: @veui-pagination-font-size-s - 2;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        cursor: pointer;

        border: 1px solid @veui-pagination-button-border-color;
        background-color: @veui-pagination-button-background-color;
        color: @veui-pagination-button-font-color;
        .veui-button-transition();

        &.@{veui-prefix}-pagination-more {
            border-color: transparent;
            background-color: transparent;
            position: relative;

            .@{veui-prefix}-icon {
                .veui-transition(opacity);
            }

            .@{veui-prefix}-pagination-more-ellipsis {
                opacity: 1;
            }

            .@{veui-prefix}-pagination-more-arrow {
                position: absolute;
                opacity: 0;
            }

            &:hover {
                border-color: @veui-pagination-button-border-color;
            }

            &:hover,
            &.focus-visible,
            &[data-focus-visible-added] {
                .@{veui-prefix}-pagination-more-ellipsis {
                    opacity: 0;
                }

                .@{veui-prefix}-pagination-more-arrow {
                    opacity: 1;
                }
            }
        }

        &:hover {
            background-color: @veui-pagination-button-background-color-hover;
            border-color: @veui-pagination-button-border-color-hover;
            color: @veui-pagination-button-font-color-hover;
        }

        &.focus-visible,
        &[data-focus-visible-added] {
            background-color: @veui-pagination-button-background-color-focus;
            .veui-focus-ring(@veui-pagination-button-border-color-focus, @veui-pagination-button-shadow-focus);
        }

        &:hover,
        &.focus-visible,
        &[data-focus-visible-added] {
            text-decoration: none;
        }

        &:active {
            background-color: @veui-pagination-button-background-color-active;
            border-color: @veui-pagination-button-border-color-active;
        }

        &.@{veui-prefix}-disabled {
            border-color: @veui-pagination-button-border-color-disabled;
            background-color: @veui-pagination-button-background-color-disabled;
            color: @veui-pagination-button-font-color-disabled;
        }

        &.@{veui-prefix}-current {
            border-color: @veui-pagination-button-border-color-current;
            background-color: @veui-pagination-button-background-color-current;
            color: @veui-pagination-button-font-color-current;
            font-weight: @veui-pagination-button-font-weight-current;
        }
    }

    &-switch {
        margin-left: @veui-pagination-page-items-margin-after;

        .veui-pagination-prev,
        .veui-pagination-next {
            border: 1px solid @veui-pagination-nav-button-border-color;
        }
    }

    &[ui~="xs"] {
        font-size: @veui-pagination-font-size-xs;

        .@{veui-prefix}-link {
            .make-metrics(xs);
            font-size: @veui-pagination-font-size-xs;
        }
        .@{veui-prefix}-pagination-goto {
            .@{veui-prefix}-input {
                width: @veui-pagination-goto-input-width-xs;
            }
        }
    }

    &[ui~="m"] {
        font-size: @veui-pagination-font-size-m;

        .@{veui-prefix}-link {
            .make-metrics(m);
            font-size: @veui-pagination-font-size-m;
        }

        .@{veui-prefix}-pagination-goto {
            .@{veui-prefix}-input {
                width: @veui-pagination-goto-input-width-m;
            }
        }
    }

    &[ui~="number"] {
        .@{veui-prefix}-link {
            background-color: transparent;
            border: none;

            &.focus-visible,
            &[data-focus-visible-added] {
                background-color: @veui-pagination-button-background-color-focus;
                border: 1px solid @veui-pagination-button-border-color-hover;
                color: @veui-pagination-button-border-color-active;
            }
        }
    }
}