@mixin global-button-light {
    color: $mocp-primary-6;
    background-color: $mocp-primary-1;
}
@mixin global-button-light-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 {
    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%);
}
@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%);
}
@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%);
}
@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;
    &.light {
        @include global-button-light;
        &:active {
            @include global-button-light-active;
        }
        &::after {
            border: none;
        }
    }
    &.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 {
        padding: 0;
        color: $mocp-primary-6;
        background-color: transparent;
        &::after {
            border: none;
        }
    }
}
