$prefix-button : #{$prefix}button;
.#{$prefix-button}{
    @mixin btn-type ($color-type, $color) {
        &-#{$color-type}{
            @include get-color-background-coloured();
            border-color: transparent;
            background-color: $color;
            @include outline($color);
            &:hover{
                @include get-color-background-coloured();
                border-color: lighten($color, $toning-ratio);
                background-color: lighten($color, $toning-ratio);
            }
            &:active{
                @include get-color-background-coloured();
                border-color: darken($color, $toning-ratio);
                background-color: darken($color, $toning-ratio);
            }
        }
    }
    display: inline-block;
    font-weight: 400;
    text-align: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation; // 功能见：https://www.zhangxinxu.com/wordpress/2018/07/chrome-safari-touchmove-preventdefault-treated-as-passive/
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    transition: color $transition-hover-time $bezier,
                background-color $transition-hover-time $bezier,
                border $transition-hover-time $bezier,
                opacity $transition-hover-time $bezier,
                box-shadow $transition-hover-time $bezier;
    border-radius: $border-radius-button;
    padding: $btn-padding;
    margin: $outline-width;
    border: 1px solid;
    @include get-color-border();
    @include outline();
    &:hover{
        color: $color-primary;
        border-color: $color-primary;
    }
    // size对应的样式分类
    @include form-dom-size();
    // type对应的样式分类
    &-type{
        @include btn-type(primary,$color-primary);
        @include btn-type(info,$color-info);
        @include btn-type(success,$color-success);
        @include btn-type(warning,$color-warning);
        @include btn-type(error,$color-error);
        &-dashed{
            border-style: dashed;
        }
        &-text{
            border: none;
        }
    }
    // shape对应的样式分类
    &-shape{
        &-circle{
            border-radius: 2em;
        }
    }
    // 设置button为圆形
    &-circle{
        padding: 0;
        width: $form-dom-height-base;
        border-radius: 50%;
    }
    &-size{
        &-large.#{$prefix-button}-circle{
            width: $form-dom-height-large;
        }
        &-small.#{$prefix-button}-circle{
            width: $form-dom-height-small;
        }
    }

    &>*{
        &.zov-spin[zov-internal-reference-button]{
            color: unset;
        }
        margin-right: 5px;
        &:nth-last-child(1){
            margin-right: 0;
        }
    }
    @include disabled();
}