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

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

    &-long{
        width: 100%;
    }

    & > .haloe-icon + span, & > span + .haloe-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-primary-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-primary-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-primary-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-primary-border;
            }
        }
    }

    &-secondary {
        .btn-secondary;
    }
    &-dashed {
      .btn-dashed;
      .btn-secondary;
      // .btn-dashed;
    }
      &-dashed {
        background: @color-bg-page;
        &:hover {
          background: @color-bg-page;
          border-color: @color-brand-primary;
        }
        &:active {
          background: @color-bg-normal;
          border-color: @color-brand-primary;
        }
      }
    &-error {
        .btn-error;
    }

    //做兼容type=drop.
    &-drop {
        .btn-text;
    }
    &-text{
      .btn-text;
    }

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

    &:before {
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: -1px;
        right: -1px;
        background: @color-functional-white;
        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);
    }

    //ghost
    &-ghost{
        color: @color-functional-white;
        background: transparent;
        &:hover{
            background: transparent;
        }
    }
    &-ghost&-secondary{
        color: @color-functional-white;
        border-color: @color-functional-white;
        &:hover{
            color: tint(@color-brand-primary, 20%);
            border-color: tint(@color-brand-primary, 20%);
        }
    }
    &-ghost&-primary{
        color: @btn-primary-color;
        background: @btn-primary-bg;
        &:hover{
            color: tint(@btn-primary-color, 20%);
            background: fade(tint(@color-brand-primary, 5%), 50%);
            border-color: fade(tint(@color-brand-primary, 5%), 50%);
        }
    }

    &-ghost&-error{
        color: @btn-primary-color;
        background: @btn-error-color;
        &:hover{
            color: tint(@btn-primary-color , 20%);
            background: fade(tint(@btn-error-color , 5%), 50%);
            border-color: fade(tint(@btn-error-color, 5%), 50%);
        }
    }

    &-ghost&-primary[disabled],
    &-ghost&-secondary[disabled],
    &-ghost&-text[disabled],
    &-ghost&-drop[disabled],
    &-ghost&-error[disabled] {
        background: transparent;
        color: fade(#000, 25%);
        border-color: @btn-disable-border;
    }
}

a.@{btn-prefix-cls} {
    padding-top: 0.1px;
    line-height: @btn-height-base - 2px;

    &-middle {
        line-height: @btn-height-middle - 2px;
    }
    &-small {
        line-height: @btn-height-small - 2px;
    }
}