@mixin global-button-primary {
    color: #fff;
    background-color: $uni-color-primary;
}
@mixin global-button-primary-active {
    color: darken(#fff, 10%);
    background-color: darken($uni-color-primary, 5%);
    border-color: darken($uni-color-primary, 5%);
}
@mixin global-button-success {
    color: #fff;
    background-color: $uni-color-success;
}
@mixin global-button-success-active {
    color: darken(#fff, 10%);
    background-color: darken($uni-color-success, 5%);
    border-color: darken($uni-color-success, 5%);
}
@mixin global-button-warning {
    color: #fff;
    background-color: $uni-color-warning;
}
@mixin global-button-warning-active {
    color: darken(#fff, 10%);
    background-color: darken($uni-color-warning, 5%);
    border-color: darken($uni-color-warning, 5%);
}
@mixin global-button-danger {
    color: #fff;
    background-color: $uni-color-error;
}
@mixin global-button-danger-active {
    color: darken(#fff, 10%);
    background-color: darken($uni-color-error, 5%);
    border-color: darken($uni-color-error, 5%);
}
.global-button {
    padding: 0 20rpx;
    margin: 0;
    font-size: 28rpx;
    border-radius: 52rpx;
    &.primary {
        @include global-button-primary;
        &:active {
            @include global-button-primary-active;
        }
    }
    &.success {
        @include global-button-success;
        &:active {
            @include global-button-success-active;
        }
    }
    &.warning {
        @include global-button-warning;
        &:active {
            @include global-button-warning-active;
        }
    }
    &.danger {
        @include global-button-danger;
        &:active {
            @include global-button-danger-active;
        }
    }
    &.text {
        color: $uni-color-primary;
        background-color: transparent;
        &::after {
            border: none;
        }
    }
}
