//primary
@mixin global-button-primary-border {
    color: $mocp-primary-6;
    border: 0.5rpx solid $mocp-primary-6;
}
@mixin global-button-primary-border-active {
    color: darken($mocp-primary-6, 10%);
    background-color: darken($mocp-primary-1, 5%);
}
@mixin global-button-primary-plain {
    color: $mocp-primary-6;
    background-color: $mocp-primary-1;
}
@mixin global-button-primary-plain-active {
    color: darken($mocp-primary-6, 10%);
    background-color: darken($mocp-primary-1, 5%);
    border-color: darken($mocp-primary-1, 5%);
}
@mixin global-button-primary-text {
    color: $mocp-primary-6;
}
@mixin global-button-primary-text-active {
    color: darken($mocp-primary-6, 10%);
}
@mixin global-button-primary {
    color: #fff;
    background-color: $mocp-primary-6;
}
@mixin global-button-primary-active {
    color: darken(#fff, 10%);
    background-color: darken($mocp-primary-7, 5%);
    border-color: darken($mocp-primary-7, 5%);
}
//success
@mixin global-button-success-border {
    color: $mocp-success-6;
    border: 0.5rpx solid $mocp-success-6;
}
@mixin global-button-success-border-active {
    color: darken($mocp-success-6, 10%);
    background-color: darken($mocp-success-1, 5%);
}
@mixin global-button-success-plain {
    color: $mocp-success-6;
    background-color: $mocp-success-1;
}
@mixin global-button-success-plain-active {
    color: darken($mocp-success-6, 10%);
    background-color: darken($mocp-success-1, 5%);
    border-color: darken($mocp-success-1, 5%);
}
@mixin global-button-success-text {
    color: $mocp-success-6;
}
@mixin global-button-success-text-active {
    color: darken($mocp-success-6, 10%);
}
@mixin global-button-success {
    color: #fff;
    background-color: $mocp-success-6;
}
@mixin global-button-success-active {
    color: darken(#fff, 10%);
    background-color: darken($mocp-success-7, 5%);
    border-color: darken($mocp-success-7, 5%);
}
//warning
@mixin global-button-warning-border {
    color: $mocp-warning-6;
    border: 0.5rpx solid $mocp-warning-6;
}
@mixin global-button-warning-border-active {
    color: darken($mocp-warning-6, 10%);
    background-color: darken($mocp-warning-1, 5%);
}
@mixin global-button-warning-plain {
    color: $mocp-warning-6;
    background-color: $mocp-warning-1;
}
@mixin global-button-warning-plain-active {
    color: darken($mocp-warning-6, 10%);
    background-color: darken($mocp-warning-1, 5%);
    border-color: darken($mocp-warning-1, 5%);
}
@mixin global-button-warning-text {
    color: $mocp-warning-6;
}
@mixin global-button-warning-text-active {
    color: darken($mocp-warning-6, 10%);
}
@mixin global-button-warning {
    color: #fff;
    background-color: $mocp-warning-6;
}
@mixin global-button-warning-active {
    color: darken(#fff, 10%);
    background-color: darken($mocp-warning-7, 5%);
    border-color: darken($mocp-warning-7, 5%);
}
//danger
@mixin global-button-danger-border {
    color: $mocp-danger-6;
    border: 0.5rpx solid $mocp-danger-6;
}
@mixin global-button-danger-border-active {
    color: darken($mocp-danger-6, 10%);
    background-color: darken($mocp-danger-1, 5%);
}
@mixin global-button-danger-plain {
    color: $mocp-danger-6;
    background-color: $mocp-danger-1;
}
@mixin global-button-danger-plain-active {
    color: darken($mocp-danger-6, 10%);
    background-color: darken($mocp-danger-1, 5%);
    border-color: darken($mocp-danger-1, 5%);
}
@mixin global-button-danger-text {
    color: $mocp-danger-6;
}
@mixin global-button-danger-text-active {
    color: darken($mocp-danger-6, 10%);
}
@mixin global-button-danger {
    color: #fff;
    background-color: $mocp-danger-6;
}
@mixin global-button-danger-active {
    color: darken(#fff, 10%);
    background-color: darken($mocp-danger-7, 5%);
    border-color: darken($mocp-danger-7, 5%);
}
.global-button {
    padding: 0 20rpx;
    margin: 0;
    font-size: 28rpx;
    &.primary-border {
        @include global-button-primary-border;
        &:active {
            @include global-button-primary-border-active;
        }
        &::after {
            border: none;
        }
    }
    &.primary-plain {
        @include global-button-primary-plain;
        &:active {
            @include global-button-primary-plain-active;
        }
        &::after {
            border: none;
        }
    }
    &.primary-text {
        @include global-button-primary-text;
        &:active {
            @include global-button-primary-text-active;
        }
        &::after {
            border: none;
        }
    }
    &.primary {
        @include global-button-primary;
        &:active {
            @include global-button-primary-active;
        }
    }
    &.success-border {
        @include global-button-success-border;
        &:active {
            @include global-button-success-border-active;
        }
        &::after {
            border: none;
        }
    }
    &.success-plain {
        @include global-button-success-plain;
        &:active {
            @include global-button-success-plain-active;
        }
        &::after {
            border: none;
        }
    }
    &.success-text {
        @include global-button-success-text;
        &:active {
            @include global-button-success-text-active;
        }
        &::after {
            border: none;
        }
    }
    &.success {
        @include global-button-success;
        &:active {
            @include global-button-success-active;
        }
    }
    &.warning-border {
        @include global-button-warning-border;
        &:active {
            @include global-button-warning-border-active;
        }
        &::after {
            border: none;
        }
    }
    &.warning-plain {
        @include global-button-warning-plain;
        &:active {
            @include global-button-warning-plain-active;
        }
        &::after {
            border: none;
        }
    }
    &.warning-text {
        @include global-button-warning-text;
        &:active {
            @include global-button-warning-text-active;
        }
        &::after {
            border: none;
        }
    }
    &.warning {
        @include global-button-warning;
        &:active {
            @include global-button-warning-active;
        }
    }
    &.danger-border {
        @include global-button-danger-border;
        &:active {
            @include global-button-danger-border-active;
        }
        &::after {
            border: none;
        }
    }
    &.danger-plain {
        @include global-button-danger-plain;
        &:active {
            @include global-button-danger-plain-active;
        }
        &::after {
            border: none;
        }
    }
    &.danger-text {
        @include global-button-danger-text;
        &:active {
            @include global-button-danger-text-active;
        }
        &::after {
            border: none;
        }
    }
    &.danger {
        @include global-button-danger;
        &:active {
            @include global-button-danger-active;
        }
    }
    &.text {
        padding: 0;
        color: $mocp-primary-6;
        background-color: transparent;
        &::after {
            border: none;
        }
    }
}
