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

.button-size(@height; @padding; @font-size; @border-radius) {
    height: @height;
    padding: @padding;
    font-size: @font-size;
    border-radius: @border-radius;
}

.button-color(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;
    > a:only-child {
        color: currentColor;
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: transparent;
        }
    }
}

.button-variant(@color; @background; @border) {
    .button-color(@color; @background; @border);

    &:hover
    //&:focus
    {
        .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
    }
    &:active,
    &.active {
        .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
        }
    }
}

.button-group-base(@btnClassName) {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    > .@{btnClassName} {
        position: relative;
        float: left;
        &:hover,
        //&:focus,
        &:active,
        &.active {
            z-index: 2;
        }
    }

    &-circle .@{btnClassName} {
        border-radius: @btn-circle-size;
    }

    // size
    &-middle&-circle .@{btnClassName} {
        border-radius: @btn-circle-size-middle;
    }
    &-middle {
        & > .@{btnClassName} {
            .button-size(@btn-height-middle; @btn-padding-middle; @btn-font-size-middle; @btn-border-radius);
        }
    }

    &-small&-circle .@{btnClassName} {
        border-radius: @btn-circle-size-small;
    }
    &-small {
        & > .@{btnClassName}{
            .button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius);
            > .@{css-prefix-iconfont} {
                font-size: @btn-font-size;
            }
        }
    }

    &-small .@{btnClassName}-icon-only{
        .square(@btn-height-small);
        padding: 0;
    }
    &-middle .@{btnClassName}-icon-only{
        .square(@btn-height-middle);
        padding: 0;
    }
}

.button-group-vertical-base(@btnClassName) {
    display: inline-block;
    vertical-align: middle;
    > .@{btnClassName} {
        display: block;
        width: 100%;
        max-width: 100%;
        float: none;
        min-width: @btn-height-base;

    }
    &.@{btnClassName}-group-small > .@{btnClassName}{
        min-width: @btn-height-small;
    }
    &.@{btnClassName}-group-middle > .@{btnClassName}{
        min-width: @btn-height-middle;
    }

}

// square button: the content only contains icon
.btn-square(@btnClassName) {
    .square(@btn-square-size);
    .button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius);
    &.@{btnClassName}-middle {
        .square(@btn-square-size-middle);
        .button-size(@btn-square-size-middle; 0; @btn-font-size-middle + 2px; @btn-border-radius);
    }
    &.@{btnClassName}-small {
        .square(@btn-square-size-small);
        .button-size(@btn-square-size-small; 0; @font-size-base; @btn-border-radius);
    }
}

.btn() {
    display: inline-block;
    margin-bottom: 0;
    font-weight: @btn-font-weight;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: @line-height-base;
    user-select: none;
    .button-size(@btn-height-base; @btn-padding-base; @btn-font-size-middle; @btn-border-radius);
    //transform: translate3d(0, 0, 0);
    //transition: all @transition-time linear;
    transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;

    > .@{css-prefix-iconfont} {
        line-height: @line-height-base;
        //vertical-align: middle;
    }

    &-icon-only&-circle > .@{css-prefix-iconfont}{
        // vertical-align: baseline;
    }

    > span, > i{
        display: inline-block;
        //vertical-align: middle;
    }

    &,
    &:active,
    &:focus {
        outline: 0;
    }

    &:not([disabled]):hover {
        text-decoration: none;
    }

    &:not([disabled]):active {
        outline: 0;
        // transition: none;  // 如果不注释此行，那么active会和focus同时触发，此时focus的开始动画transition会无效
    }

    &.disabled,
    &[disabled] {
        cursor: @cursor-disabled;
        > * {
            pointer-events: none;
        }
    }

    &-middle {
        .button-size(@btn-height-middle; @btn-padding-middle; @btn-font-size-middle; @btn-border-radius);
    }

    &-small {
        .button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius);
    }

    &-icon-only{
        .btn-square(@btn-prefix-cls);
    }
}

// Primary
.btn-primary() {
    font-weight: 500;
    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);

    &:hover
    {
        .button-color(@btn-primary-color; @btn-hover-color; @btn-hover-color);
    }
    &:active,
    &.active {
        color: @btn-primary-color;
        background-color: @btn-active-color;
        border-color: @btn-active-color;
    }
    // .active-btn-color(@color-brand-primary);

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            color: @btn-primary-disable-color;
            background-color: @btn-primary-disable-bg;
            border-color: @btn-primary-disable-border;
        }
    }
}

// Secondary
.btn-secondary(){
    .button-variant(@btn-secondary-color ; @btn-secondary-bg; @btn-secondary-border);

    &:hover
    //&:focus
    {
        .button-color(@color-brand-press; @btn-secondary-bg; @color-brand-press);
    }
    &:active,
    &.active {
        .button-color(@color-brand-primary; @color-bg-select; @color-brand-primary);
    }
    
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            color: @btn-secondary-disable-color;
            background-color: @btn-secondary-disable-bg;
            border-color: @btn-secondary-disable-border;
        }
    }
    
    &.@{btn-prefix-cls}-no-border {
        .button-variant(
            @btn-secondary-new-color;
            @btn-secondary-new-bg;
            @btn-secondary-new-border
        );
        
        &:hover
        {
            .button-color(
                @btn-secondary-new-hover-color;
                @btn-secondary-new-bg;
                @btn-secondary-new-bg
            );
        }

        &:active,
        &.active {
            .button-color(
                @btn-active-color;
                @btn-secondary-new-bg;
                @btn-secondary-new-bg
            );
        }
        &.disabled,
        &[disabled],
        fieldset[disabled] & {
            &,
            &:hover,
            &:focus,
            &:active,
            &.active {
                color: @btn-secondary-new-disable-color;
                background-color: @btn-secondary-new-disable-bg;
                border-color: @btn-secondary-new-disable-border;
            }
        }
    }
}

// Error
.btn-error(){
    .button-variant(@btn-primary-color;@btn-error-bg; @btn-error-border);

    &:hover
    //&:focus
    {
        .button-color(@btn-primary-color;  @btn-error-hover-color; @btn-error-border);
    }
    &:active,
    &.active {
        .button-color(@btn-primary-color;  @btn-error-active-bg; @btn-error-border );
    }
    // .active-btn-color(@error-color);
}

// Drop
// .btn-drop(){
//     .button-variant(@btn-drop-color , @btn-drop-bg , @btn-drop-border );

//     // for disabled
//     &.disabled,
//     &[disabled],
//     fieldset[disabled] & {
//         &,
//         &:hover,
//         &:focus,
//         &:active,
//         &.active {
//             .button-color(@btn-disable-color; @btn-drop-bg; @btn-drop-active-bg);
//         }
//     }

//     &:hover
//     {
//         .button-color(@btn-drop-hover-color; @btn-drop-bg; @btn-drop-border);
//     }
//     &:active,
//     &.active {
//         .button-color(@btn-drop-hover-color; @btn-drop-bg; @btn-drop-active-bg);
//     }
//     // .active-btn-color(@color-brand-primary);
// }

// Text
.btn-text() {
  .button-variant(@btn-text-color , @btn-text-bg , @btn-text-border );

  // for disabled
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
      &,
      &:hover,
      &:focus,
      &:active,
      &.active {
          .button-color( @btn-text-pagelevel-disabled-color;@btn-text-bg;@btn-text-bg;);
      }
  }

  &:hover
  {
      .button-color(@btn-hover-color; @btn-text-bg; @btn-text-border);
  }
  &:active,
  &.active {
      .button-color(@btn-active-color; @btn-text-bg; @btn-text-active-bg);
  }
  // .active-btn-color(@color-brand-primary);

  &.@{btn-prefix-cls}-page-level {
        .button-variant(
            @btn-text-color ,
            @btn-text-bg ,
            @btn-text-border 
        );
        
        &:hover
        {
            .button-color(
                @btn-text-pagelevel-hover-color,
                @btn-text-pagelevel-hover-bg,
                @btn-text-pagelevel-hover-border
            );
        }

        &:active,
        &.active {
            .button-color(
                @btn-text-pagelevel-active-color;
                @btn-text-pagelevel-active-bg;
                @btn-text-pagelevel-active-border;
            );
        }
        &.disabled,
        &[disabled],
        fieldset[disabled] & {
            &,
            &:hover,
            &:focus,
            &:active,
            &.active {
                color: @btn-text-pagelevel-disabled-color;
                background-color:@btn-text-bg;
                border-color:@btn-text-bg;
            }
        }
    }
     
}

 

// Dashed
.btn-dashed() {
  // .button-variant(@btn-secondary-color ; @btn-secondary-bg; @btn-secondary-border);
  border-style: dashed;

  // &:hover
  // //&:focus
  // {
  //     .button-color(@color-brand-primary; @btn-secondary-bg; @btn-primary-border);
  // }
  // &:active,
  // &.active {
  //     .button-color(@color-brand-primary; #E1ECFF; @color-brand-primary);
  // }
  // .active-btn-color(@primary-color);
}

// Color
// for tabindex
.active-btn-color(@color) {
    &:focus {
        box-shadow: 0 0 0 2px fade(@color, 20%);
    }
}
.btn-color(@color) {
    .button-variant(@btn-primary-color ; @color; @color);

    &:hover,
        //&:focus,
    &:active,
    &.active {
        color: @btn-primary-color ;
    }

    .active-btn-color(@color);
}

// Circle for Icon
.btn-circle(@btnClassName: haloe-btn) {
    border-radius: @btn-circle-size;

    &.@{btnClassName}-middle{
        border-radius: @btn-circle-size-middle;
    }

    &.@{btnClassName}-size{
        border-radius: @btn-circle-size-small;
    }

    &.@{btnClassName}-icon-only{
        .square(@btn-circle-size);
        .button-size(@btn-height-base; 0; @font-size-base + 2; 50%);

        &.@{btnClassName}-middle{
            .square(@btn-circle-size-middle);
            .button-size(@btn-height-middle; 0; @btn-font-size-middle + 2; 50%);
        }

        &.@{btnClassName}-small{
            .square(@btn-circle-size-small);
            .button-size(@btn-height-small; 0; @font-size-base; 50%);
        }
    }
}

// Group
.btn-group(@btnClassName: haloe-btn) {
    .button-group-base(@btnClassName);

    .@{btnClassName} + .@{btnClassName},
    .@{btnClassName} + &,
    & + .@{btnClassName},
    & + & {
        margin-left: -1px;
    }

    .@{btnClassName}:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    &:not(&-vertical) > .@{btnClassName}:first-child {
        margin-left: 0;
        &:not(:last-child) {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
    }

    &:not(&-vertical) > .@{btnClassName}:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    & > & {
        float: left;
    }

    & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
        border-radius: 0;
    }

    &:not(&-vertical) > &:first-child:not(:last-child) {
        > .@{btnClassName}:last-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-right: 8px;
        }
    }

    &:not(&-vertical) > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        padding-left: 8px;
    }
}

.btn-group-vertical(@btnClassName: haloe-btn) {
    .button-group-vertical-base(@btnClassName);

    .@{btnClassName} + .@{btnClassName},
    .@{btnClassName} + &,
    & + .@{btnClassName},
    & + & {
        margin-top: -1px;
        margin-left: 0px;
    }

    > .@{btnClassName}:first-child {
        margin-top: 0;
        &:not(:last-child) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    > .@{btnClassName}:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    & > &:first-child:not(:last-child) {
        > .@{btnClassName}:last-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding-bottom: 8px;
        }
    }

    & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding-top: 8px;
    }
}