$success: #20d08c;
$error: #e91a1a;
$warning: #ffb200;
$info: #005ff1;
$default: #ddd;
$white: #fff;
@mixin btn-type($color, $bgColor) {
    color: #fff;
    border-color: $color;
    background: $bgColor;
    font-weight: 400;
    &:hover {
        background-color: lighten($color, 5%);
        border-color: lighten($color, 5%);
    }
    &:active {
        background-color: darken($color, 2%);
        border-color: darken($color, 2%);
    }
    &:disabled {
        &:hover, &:active {
            color: #999;
            cursor: not-allowed;
            border-color: #ddd;
            background: #eee;
        }
    }
}
// &替换父选择器,#{}插值
.zmap-btn{
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 14px;
    line-height: 30px;
    height: 32px;
    border-radius: 4px;
    outline: none;
    &:disabled {
        color: #999;
        cursor: not-allowed;
        border-color: #ddd;
        background: #eee;
    }
    &-default {
        color: #333;
        border-color: #ddd;
        background: #fff;
        font-weight: 400;
    }
    &-success {
        @include btn-type($success, $success);
    }
    &-error {
        @include btn-type($error, $error);
    }
    &-warning {
        @include btn-type($warning, $warning);
    }
    &-info {
        @include btn-type($info, $info);
    }
    &-small {
        padding: 0 5px;
        font-size: 12px;
        line-height: 20px;
        height: 24px;
    }
    &-medium {
        padding: 0 20px;
        font-size: 14px;
        line-height: 34px;
        height: 36px;
    }
    &-large {
        padding: 0 28px;
        font-size: 14px;
        line-height: 38px;
        height: 40px;
    }
    &-circle {
        border-radius: 28px;
    }
    &-rectangle {
        border-radius: 0px;
    }
}