$button-prefix-cls: $prefix-name + "button";



.#{$button-prefix-cls} {
    display: inline-flex;
    font-weight: normal;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: $btnBoderWidth solid transparent;
    white-space: nowrap;
    line-height: $lineHeight;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    border-radius: $borderRadius;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
    color: $textColor;
    background-color: #fff;
    border-color: $borderColor; 
    align-items: center;
    justify-content: center;

    &[disabled] {
        color: $disableColor;
        background-color: #f7f7f7;
        border-color: $borderColor;
        cursor: not-allowed;
    }

    &:focus {
        outline: none;
    }

    &-primary {
        color: #fff;
        background-color: $primaryColor;
        border-color: $primaryColor;
    }



    &-dashed {
        color: $textColor;
        background-color: #fff;
        border-color: $borderColor;
        border-style: dashed;


    }

    &-info {
        color: #fff;
        background-color: $infoColor;
        border-color: $infoColor;
    }

    &-success {
        color: #fff;
        background-color: $successColor;
        border-color: $successColor;
    }

    &-warning {
        color: #fff;
        background-color: $warningColor;
        border-color: $warningColor;
    }

    &-error {
        color: #fff;
        background-color: $errorColor;
        border-color: $errorColor;
    }

    &-text {
        color: $textColor;
        background-color: transparent;
        border-color: transparent;
    }


    &-ghost {
        color: #fff;
        background: transparent;

        &:hover {
            background: transparent;
        }

        &.#{$button-prefix-cls}-dashed,
        &.#{$button-prefix-cls}-default {
            color: #fff;
            border-color: #fff;

            &:hover {
                color: $primaryColor;
                border-color: $primaryColor;
            }
        }

        &.#{$button-prefix-cls}-primary {
            color: $primaryColor;

            &:hover {
                color: $primaryColor;
                background: fade-out(lighten($primaryColor, 95%), .5);

            }
        }

        &.#{$button-prefix-cls}-info {
            color: $infoColor;

            &:hover {
                color: lighten($infoColor, 20%);
                background: fade-out(lighten($infoColor, 95%), .5%);
            }
        }

        &.#{$button-prefix-cls}-success {
            color: $successColor;

            &:hover {
                color: lighten($successColor, 20%);
                background: fade-out(lighten($successColor, 95%), .5);
            }
        }

        &.#{$button-prefix-cls}-warning {
            color: $warningColor;

            &:hover {
                color: lighten($warningColor, 20%);
                background: fade-out(lighten($warningColor, 95%), .5);
            }
        }

        &.#{$button-prefix-cls}-error {
            color: $errorColor;

            &:hover {
                color: lighten($errorColor, 20%);
                background: fade-out(lighten($errorColor, 95%), .5);
            }
        }

        &.#{$button-prefix-cls}-default[disabled],
        &.#{$button-prefix-cls}-dashed[disabled],
        &.#{$button-prefix-cls}-primary[disabled],
        &.#{$button-prefix-cls}-info[disabled],
        &.#{$button-prefix-cls}-success[disabled],
        &.#{$button-prefix-cls}-warning[disabled],
        &.#{$button-prefix-cls}-error[disabled] {
            background: transparent;
            color: fade-out(#000, .25);
            border-color: $borderColor;
        }

        &.#{$button-prefix-cls}-text[disabled] {
            background: transparent;
            color: fade-out(#000, .25);
            border-color: transparent;

        }
    }








}