

$pheight:30px;
$borderHeight:2px;
@import "../../scss/theme/config";
.cd-long-pagination {
    height: $pheight;
    user-select: none;
    >* {
        height: $pheight;
        box-sizing: border-box;
        display: inline-block;
        font-size: 12px;
        color: $colorDark;
        vertical-align: middle;
        line-height: $pheight - $borderHeight - 1px;
    }
    .cd-child-select {
        margin: 0 5px;
        width: 56px;
        height: 30px;
    }
    .cd-btn {
        box-sizing: border-box;
        border: 1px solid $colorBtnGhostBorder;
        border-radius: 2px;
        min-width: 40px;
        padding: 0 12px;
        text-align: center;
        cursor: pointer;
        &:hover {
            border: 1px solid $colorBtnHover;
            color: $colorHover;
        }
        &.cd-disabled {
            color: $colorDisable;
            border-color: $colorDisable;
            cursor: no-drop;
        }
    }
    .cd-page {
        &.cd-current {
            color: $colorError;
            border: none;
        }
    }
    .d-ellipsis {
        margin: 0 2px;
        text-align: center;
        @extend .cd-component;
        @extend .cd-component-ellipsis;
    }
    .cd-first-page {
        margin-left: 162px;
    }
    .cd-last-page {
        margin-right: 8px;
    }
    .cd-next-page {
        >span {
            display: inline-block;
            vertical-align: middle;
        }
        .cd-icon {
            @extend .cd-component;
            @extend .cd-component-arrow_right_normal;
        }
        &.cd-disabled {
            .cd-icon {
                @extend .cd-component-arrow_right;
            }
        }
        &:hover {
            .cd-icon {
                @extend .cd-component-arrow_right_hover;
            }
        }
    }
    .cd-prev-page {
        .cd-icon {
            vertical-align: middle;
            @extend .cd-component;
            @extend .cd-component-arrow_left_normal;
        }
        &.cd-disabled {
            .cd-icon {
                @extend .cd-component-arrow_left;
            }
        }
        &:hover {
            .cd-icon {
                @extend .cd-component-arrow_left_hover;
            }
        }
    }
    .cd-go-page {
        width: 37px;
        margin: 0 2px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid $colorBtnGhostBorder;
        box-sizing: border-box;
        &:hover {
            border: 1px solid $colorBtnHover;
        }
    }
    .cd-search {
        margin-left: 10px;
    }
    .cd-total-text {
        margin: 0 23px;
    }
}