@btn-prefix-cls: ~"@{css-prefix}btn";

.@{btn-prefix-cls} {
    .btn;
    .btn-default;

    &-long{
        width: 100%;
    }

    & > .ivu-icon + span, & > span + .ivu-icon{
        margin-left: 4px;
    }

    &-primary {
        .btn-primary;

        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
            border-right-color: @btn-group-border;
            border-left-color: @btn-group-border;
        }

        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child {
            &:not(:last-child) {
                border-right-color: @btn-group-border;
                &[disabled] {
                    border-right-color: @btn-default-border;
                }
            }
        }

        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} {
            border-left-color: @btn-group-border;
            &[disabled] {
                border-left-color: @btn-default-border;
            }
        }

        .@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
            border-top-color: @btn-group-border;
            border-bottom-color: @btn-group-border;
        }

        .@{btn-prefix-cls}-group-vertical &:first-child {
            &:not(:last-child) {
                border-bottom-color: @btn-group-border;
                &[disabled] {
                    border-top-color: @btn-default-border;
                }
            }
        }

        .@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
        .@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} {
            border-top-color: @btn-group-border;
            &[disabled] {
                border-bottom-color: @btn-default-border;
            }
        }
    }

    //&-ghost {
    //    .btn-ghost;
    //}

    &-dashed{
        .btn-dashed;
    }

    &-text{
        .btn-text;
    }

    &-success {
        .btn-color(@success-color);
    }

    &-warning {
        .btn-color(@warning-color);
    }

    &-error {
        .btn-color(@error-color);
    }

    &-info {
        .btn-color(@info-color);
    }

    &-circle,
    &-circle-outline {
        .btn-circle(@btn-prefix-cls);
    }

    &-search {
        .btn-color(@search-color);
    }

    &-confirm {
        .btn-color(@confirm-color);
    }

    &-cancel {
        .btn-color(@cancel-color);
    }

    &-reset {
        .btn-color(@reset-color);
    }

    &:before {
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: -1px;
        right: -1px;
        background: #fff;
        opacity: 0.35;
        content: '';
        border-radius: inherit;
        z-index: 1;
        transition: opacity @transition-time;
        pointer-events: none;
        display: none;
    }

    &&-loading {
        pointer-events: none;
        position: relative;

        &:before {
            display: block;
        }
    }

    &-group {
        .btn-group(@btn-prefix-cls);
    }

    &-group-vertical {
        .btn-group-vertical(@btn-prefix-cls);
    }

    // The new ghost in 3.0
    &-ghost{
        color: #fff;
        background: transparent;
        &:hover{
            background: transparent;
        }
    }
    &-ghost&-dashed, &-ghost&-default{
        color: #fff;
        border-color: #fff;
        &:hover{
            color: tint(@primary-color, 20%);
            border-color: tint(@primary-color, 20%);
        }
    }
    &-ghost&-primary{
        color: @primary-color;
        &:hover{
            color: tint(@primary-color, 20%);
            background: fade(tint(@primary-color, 95%), 50%);
        }
    }
    &-ghost&-info{
        color: @info-color;
        &:hover{
            color: tint(@info-color, 20%);
            background: fade(tint(@info-color, 95%), 50%);
        }
    }
    &-ghost&-success{
        color: @success-color;
        &:hover{
            color: tint(@success-color, 20%);
            background: fade(tint(@success-color, 95%), 50%);
        }
    }
    &-ghost&-warning{
        color: @warning-color;
        &:hover{
            color: tint(@warning-color, 20%);
            background: fade(tint(@warning-color, 95%), 50%);
        }
    }
    &-ghost&-error{
        color: @error-color;
        &:hover{
            color: tint(@error-color, 20%);
            background: fade(tint(@error-color, 95%), 50%);
        }
    }

    &-search {
        color: #fff;
        &:hover{
            color: #fff;
            background: #15bcad;
        }
    }

    &-confirm {
        color: #fff;
        &:hover {
            color: #fff;
            background: #ff903a;
        }
    }

    &-cancel {
        color: #333;
        border-color: @border-color-base;
        &:hover {
            color: #ff9a4c;
            border-color: #ff903a;
        }
    }

    &-reset {
        color: #333;
        border-color: @border-color-base;
        &:hover {
            color: #15bcad;
            border-color: #15bcad;
        }
    }

    &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled], &-ghost&-search[disabled], &-ghost&-confirm[disabled], &-ghost&-cancel[disabled], &-ghost&-reset[disabled]{
        background: transparent;
        color: fade(#000, 25%);
        border-color: @btn-disable-border;
    }
    &-ghost&-text[disabled]{
        background: transparent;
        color: fade(#000, 25%);
    }
}