@import '../../styles-new/default.less';
@import '../../theme/components/button.less';
@prefixClass: im-button;

/*********** 外层容器 **********/

.@{prefixClass} {
  // do not use width:100%, can not set margin
  display: block;
  outline: 0 none;
  -webkit-appearance: none;
  box-sizing: border-box;
  padding: 0 5px;
  text-align: center;
  font-size: @font-size-header;
  height: @button-xlarge-height;
  line-height: @button-xlarge-height;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;
  color: @color-text-base;
  background-color: @fill-base;
  text-decoration: auto;
  border-radius: @button-border-radius;
  font-weight: @button-xlarge-font-weight;
  // .hairline('all', @border-color-base, @radius-xs);

  // Multiple buttons inline arranged, the last one border-right may not display
  &-borderfix {
    &:before {
      transform: scale(0.49) !important;
    }
  }

  &&-active {
    background-color: @brand-primary;
  }

  &&-disabled {
    // color: fade(@color-text-base, 30%);
    // opacity: 0.6;
    background-color: @button-primary-fill-disable ;
    // border-radius: @radius-xs;
    color: @color-text-disabled;
    border: none;
  }

  &-primary {
    color: @button-primary-color;
    background-color: @button-primary-fill;

    // .hairline('all', @primary-button-fill, @radius-xs);

    &.@{prefixClass}-active {
      color: @button-primary-color-active;
      background-color: @button-primary-fill-active;
    }

    &.@{prefixClass}-disabled {
      color: @button-primary-color-disable;
      // border-radius: @radius-xs;
      // opacity: 0.4;
      background-color: @button-primary-fill-disable;
      // .hairline('all', #ccc, @radius-xs)
    }
  }

  &-ghost {
    color: @button-secondary-color;
    background-color: @button-secondary-fill;
    // .hairline('all', @ghost-button-color, @radius-xs);
    // border-radius: 5px;
    border: 1px solid @button-secondary-border-color;

    &.@{prefixClass}-active {
      color: @button-secondary-color-active;
      background: @button-secondary-fill-active;
      border: 1px solid @button-secondary-border-color-active;

      // .hairline('all', @ghost-button-fill-tap, @radius-xs);
    }

    &.@{prefixClass}-disabled {
      color: @button-secondary-color-disable;
      background-color: @button-secondary-fill-disable;
      // .hairline('all', #ccc, @radius-xs);
      opacity: 1; // override default opacity: 0.6

    }
  }

  &-linkButton {}

  &-link {
    border: 1px solid @button-link-border-color;
    color: @button-text-link-color;
    background-color: @button-link-fill;
    // cursor: pointer;
    // background-color: @warning-button-fill;
    // border-radius: 2px;

    &.@{prefixClass}-active {
      color: @button-text-link-color-active;
      background-color: @button-link-fill-active;
      // background-color: rgba(54, 116, 208, 0.12);
    }

    &.@{prefixClass}-disabled {
      color: @button-text-link-color-disable;
      background-color: @button-link-fill-disable;
      // border: none;
      // background-color: @button-disabled-bg;
      // opacity: 0.4;
    }
  }




  &-normal {
    font-size: @button-xlarge-font-size;
    height: @button-xlarge-height;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    padding: 0 5*@hd;
    width: 92%;
    margin: 0 auto;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }

  &-middle {
    font-size: @button-xlarge-font-size;
    height: @button-large-height;
    line-height: @button-large-height;
    display: inline-block;
    max-width: 220px;
    min-width: 104px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // width: calc((100% - 30px) / 2);

    &.im-button-isRadius {
      font-size: @button-large-font-size;
      min-width: 104px;
      padding: 0 20px;
    }
  }

  &-textLink {
    // border: 1px solid @button-link-border-color;
    color: @button-text-textlink-color;
    background-color: @button-link-fill;
    font-size: @font-size-s;
    // padding: 0 20*@hd;
    display: inline-block;
    line-height: 20px;
    height: 20px;
    max-width: 182px;
    padding: 0;
    // cursor: pointer;
    // background-color: @warning-button-fill;
    // border-radius: 2px;

    &.@{prefixClass}-active {
      color: @button-text-textlink-color-active;
      background-color: transparent;
      // background-color: rgba(54, 116, 208, 0.12);
    }

    // &.@{prefixClass}-disabled {
    //   color: @button-text-link-color-disable;
    //   background-color: @button-link-fill-disable;
    //   // border: none;
    //   // background-color: @button-disabled-bg;
    //   // opacity: 0.4;
    // }
  }

  &-small {
    font-size: @button-xlarge-font-size;
    height: @button-medium-height;
    line-height: @button-medium-height;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    display: inline-block;
    max-width: 180px;
    min-width: 86px;
    &.im-button-isRadius {
      font-size: @button-small-font-size;
      padding: 0 15px;
    }
    // width: calc((100% - 30px) / 3);
  }

  &-smallest {
    font-size: @button-xsmall-font-size;
    height: @button-small-height;
    line-height: @button-small-height;
    display: inline-block;
    padding: 0 10px;
    // max-width: 160px;
    // min-width: 68px;
    width: 68px;
    &.im-button-isRadius {
      padding: 0 10px;
    }
    &.im-button-smallest-long {
      width: 160px;
    }
    &.im-button-smallest-auto {
      min-width: 68px;
      width: auto;
      padding: 0 10px;
    }
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // min-width: 80px;
    // width: auto;
  }

  // &-XL {
  //   font-size: @button-xlarge-font-size;
  //   height: @button-xlarge-height;
  //   line-height: @button-xlarge-height;
  //   border-radius: @button-xlarge-border-radius;
  // }
  &-isRadius-middle {
    width: 165px;
    height: 50px;
    line-height: 50px;
  }

  &-isRadius-small {
    width: 105px;
    height: 50px;
    line-height: 50px;
  }

  &-size-L-short {
    font-size: @button-is-radius-large-font-size;
    width: 104*@hd;
    height: @button-large-height;
    line-height: @button-large-height;
    font-weight: @button-large-font-weight;
    border-radius: @button-is-radius-border-radius;
    padding: 0 20*@hd;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // border-radius: 50%;
  }

  &-size-L-long {
    font-size: @button-is-radius-large-font-size;
    width: 220*@hd;
    height: @button-large-height;
    line-height: @button-large-height;
    font-weight: @button-large-font-weight;
    border-radius: @button-is-radius-border-radius;
    padding: 0 20*@hd;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // border-radius: 50%;
  }

  &-size-M-short {
    width: 86*@hd;
    font-size: @button-is-radius-medium-font-size;
    height: @button-medium-height;
    line-height: @button-medium-height;
    font-weight: @button-mediume-font-weight;
    border-radius: @button-is-radius-border-radius;
    padding: 0 15px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // border-radius: 50%;
  }

  &-size-M-long {
    width: 180*@hd;
    font-size: @button-is-radius-medium-font-size;
    height: @button-medium-height;
    line-height: @button-medium-height;
    font-weight: @button-mediume-font-weight;
    border-radius: @button-is-radius-border-radius;
    padding: 0 15px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // border-radius: 50%;
  }

  &-size-S-short {
    font-size: @button-is-radius-small-font-size;
    width: 68*@hd;
    height: @button-small-height;
    line-height: @button-small-height;
    font-weight: @button-small-font-weight;
    border-radius: @button-is-radius-border-radius;
    padding: 0 10*@hd;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // border-radius: 50%;
  }

  &-size-S-long {
    font-size: @button-is-radius-small-font-size;
    width: 160*@hd;
    height: @button-small-height;
    line-height: @button-small-height;
    font-weight: @button-small-font-weight;
    border-radius: @button-is-radius-border-radius;
    padding: 0 10*@hd;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // border-radius: 50%;
  }

  &-icon {
    // width: 24px;
    // height: 24px;
    display: inline-block;

    // min-width: 50px;


    // background-color: #999;
  }

  &-isRadius {
    border-radius: 25px;
  }


  .button-icon {
    display: inline-block;
    width: 25*@hd;
    height: 25*@hd;
    vertical-align: sub;
    margin-right: 4*@hd;

    svg {
      width: 25*@hd;
      height: 25*@hd;
    }
  }

  >.@{prefixClass}-icon {
    margin-right: 4*@hd;
  }

  &-inline {
    display: inline-block;
    // padding: 0 @h-spacing-lg;

    &.@{prefixClass}-icon {
      display: inline-flex;
    }
  }

  // .title {
  //   border: '1px solid blue'
  // }
}