@import '~ehome-visual-standard/styles/eh-normalize-HD.less';
@import '../../style/index.less';
@buttonPrefixCls: eh-button;

.@{buttonPrefixCls} {
  // do not use width:100%, can not set margin
  display: block;
  outline: 0 none;
  -webkit-appearance: none;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
  font-size: 16 * @hd;
  line-height: 23 * @hd;
  font-weight: bold;

  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;

  // default
  color: @c008;
  background-color: #fff;

  > * {
    vertical-align: baseline;
  }

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

  &-loading {
    .eh-lottie {
      position: relative;
      display: inline-block;
      width: 45 * @hd;
      height: 23 * @hd;
      vertical-align: top;
    }
    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) !important;
      width: 60 * @hd !important;
      height: 60 * @hd !important;
      path {
        fill: #fff;
      }
    }
  }

  & &-icon {
    display: inline-block;
    margin-right: 8 * @hd;
    font-size: 16 * @hd;
    line-height: 23 * @hd;
  }

  &-primary {
    color: #fff;
    background-color: @eh-theme;
    border-radius: 4 * @hd;
    padding: 12 * @hd;
    min-width: 88 * @hd;

    &.@{buttonPrefixCls}-active {
      color: #fff;
      background-color: @eh-pressed;
    }
    &.@{buttonPrefixCls}-disabled {
      color: #fff;
      background-color: @eh-text_invalid;
    }

    &.@{buttonPrefixCls}-small {
      font-size: 15 * @hd;
      line-height: 21 * @hd;
      padding: 8 * @hd 12 * @hd;
      &.@{buttonPrefixCls}-loading {
        .eh-lottie {
          height: 21 * @hd;
        }
      }
      .@{buttonPrefixCls}-icon {
        font-size: 15 * @hd;
      }
    }
  }

  &-default {
    color: @eh-theme;
    border: 1PX solid @eh-theme;
    border-radius: 4 * @hd;
    padding: 12 * @hd;
    min-width: 88 * @hd;

    &.@{buttonPrefixCls}-active {
      color: @eh-pressed;
      border-color: @eh-pressed;
      background-color: @c003;
    }
    &.@{buttonPrefixCls}-disabled {
      color: @eh-text_invalid;
      border-color: @eh-bg_invalid;
    }

    &.@{buttonPrefixCls}-loading {
      background-color: #ffffff;
      .eh-lottie svg path {
        fill: @eh-theme;
      }
    }

    &.@{buttonPrefixCls}-small {
      font-size: 15 * @hd;
      line-height: 21 * @hd;
      padding: 8 * @hd 12 * @hd;
      &.@{buttonPrefixCls}-loading {
        .eh-lottie {
          height: 21 * @hd;
        }
      }
      .@{buttonPrefixCls}-icon {
        font-size: 15 * @hd;
      }
    }
  }

  &-candy {
    display: inline-block;
    border-radius: 15 * @hd;
    padding: 4 * @hd 12 * @hd;
    min-width: 69 * @hd;
    font-size: 15 * @hd;
    line-height: 21 * @hd;
    color: @eh-theme;
    background-color: #F5F5F5;
    &.@{buttonPrefixCls}-active {
      color: @eh-pressed;
      background-color: rgba(0,0,0,0.08);
    }
    &.@{buttonPrefixCls}-disabled {
      color: @eh-text_invalid;
      background-color: #F5F5F5;
    }

    &.@{buttonPrefixCls}-loading {
      .eh-lottie svg path {
        fill: @eh-theme;
      }
    }

    &.@{buttonPrefixCls}-theme {
      color: #fff;
      background-color: @eh-theme;
      &.@{buttonPrefixCls}-active {
        color: #fff;
        background-color: @eh-pressed;
      }
      &.@{buttonPrefixCls}-disabled {
        color: #fff;
        background-color: @eh-text_invalid;
      }
      &.@{buttonPrefixCls}-loading {
        .eh-lottie svg path {
          fill: #fff;
        }
      }
    }
  }

  &-text {
    color: @c008;
    background-color: transparent;
    font-weight: normal;
    &.@{buttonPrefixCls}-active {
      color: @c104;
    }
    &.@{buttonPrefixCls}-disabled {
      color: @c106;
    }
    &-vertical {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      .@{buttonPrefixCls}-icon {
        margin-right: 0;
      }
    }

    &.@{buttonPrefixCls}-loading {
      .eh-lottie svg path {
        fill: @c104;
      }
    }

    &.@{buttonPrefixCls}-theme {
      color: @eh-theme;
      &.@{buttonPrefixCls}-active {
        color: @eh-pressed;
      }
      &.@{buttonPrefixCls}-disabled {
        color: @eh-text_invalid;
      }

      &.@{buttonPrefixCls}-loading {
        .eh-lottie svg path {
          fill: @eh-theme;
        }
      }
    }
  }

  &-warning {
    color: @c016;
    padding: 12 * @hd;
    min-width: 88 * @hd;

    &.@{buttonPrefixCls}-active {
      color: @c017;
    }
    &.@{buttonPrefixCls}-disabled {
      color: @c074;
    }
    &.@{buttonPrefixCls}-loading {
      .eh-lottie svg path {
        fill: @c106;
      }
    }

    &&-default {
      border: 1PX solid @c147;
      border-radius: 4 * @hd;
      &.@{buttonPrefixCls}-active {
        background-color: @c003;
      }
      &.@{buttonPrefixCls}-loading {
        background-color: #ffffff;
      }
    }
    &&-banner {
      border: none;
      border-radius: 0;
    }
    &&-footer {
      border: none;
      border-top: 1PX solid @c147;
      border-radius: 0;
    }
  }

  &-inline {
    display: inline-block;
  }
}
