@button-prefix: ~'@{icecream-prefix}-btn';
@button-disabled-class: ~'@{button-prefix}-disabled';

.@{button-prefix} {
  .setColors(@color, @background, @border) {
    color: @color;
    background: @background;
    border-color: @border;
  }

  .setSize() {
    height: @icecream-form-input-height-md;
    line-height: @icecream-form-input-height-md - 2;

    &-large {
      height: @icecream-form-input-height-lg;
      padding: 0 @icecream-gap-lg;
      line-height: @icecream-form-input-height-lg - 2;
    }

    &-small {
      height: @icecream-form-input-height-sm;
      padding: 0 @icecream-gap-sm;
      line-height: @icecream-form-input-height-sm - 2;
      font-size: @icecream-font-size-sm;
    }
  }

  .setTextSize() {
    height: auto;
    border: none;
    .setFontSize(@icecream-font-size-md);

    &-large {
      height: getIcecreamLineHeightByPx(@icecream-font-size-lg);
      .setFontSize(@icecream-font-size-lg);
    }

    &-small {
      height: getIcecreamLineHeightByPx(@icecream-font-size-sm);
      .setFontSize(@icecream-font-size-sm);
    }
  }

  .extendBase();
  display: inline-flex;
  justify-content: center;
  padding: 0 @icecream-gap-md;
  height: @icecream-form-input-height-md;
  font-size: @icecream-font-size-main;
  color: @icecream-color-grey-10;
  outline: none;
  cursor: pointer;
  // 带 icon 的按钮和其他按钮水平不对齐
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid @icecream-color-grey-7;
  background: @icecream-white;
  border-radius: @icecream-border-radius;

  &:hover {
    .setColors(
      @icecream-color-grey-10,
      @icecream-color-grey-3,
      @icecream-color-grey-7
    );
  }

  &.@{button-disabled-class} {
    .setColors(
      @icecream-color-grey-8,
      @icecream-color-grey-4,
      @icecream-color-grey-4
    );
    cursor: not-allowed;
  }

  &-default {
    .setSize();

    &-loading.@{button-disabled-class} {
      .setColors(
        @icecream-color-grey-10,
        @icecream-color-grey-3,
        @icecream-color-grey-7
      );
      cursor: default;
    }
  }

  &-primary {
    .setSize();
    .setColors(@icecream-white, @icecream-color-blue-6, @icecream-color-blue-6);

    &:hover {
      .setColors(@icecream-white, @icecream-color-blue-4, @icecream-color-blue-4);
    }

    &.@{button-disabled-class} {
      .setColors(
        @icecream-color-grey-8,
        @icecream-color-grey-4,
        @icecream-color-grey-4
      );
      cursor: not-allowed;
    }

    &.@{button-prefix}-danger {
      .setColors(@icecream-white, @icecream-error-color, @icecream-error-color);

      &:hover {
        .setColors(@icecream-white, @icecream-color-red-4, @icecream-color-red-4);
      }

      &.@{button-disabled-class} {
        .setColors(
          @icecream-color-grey-8,
          @icecream-color-grey-4,
          @icecream-color-grey-4
        );
      }
    }

    &-loading.@{button-disabled-class} {
      .setColors(@icecream-white, @icecream-color-blue-4, @icecream-color-blue-4);
      cursor: default;

      &.@{button-prefix}-danger {
        .setColors(@icecream-white, @icecream-color-red-4, @icecream-color-red-4);
      }
    }
  }

  &-secondary {
    .setSize();
    .setColors(@icecream-color-blue-6, @icecream-white, @icecream-color-blue-6);

    &:hover {
      .setColors(@icecream-white, @icecream-color-blue-6, @icecream-color-blue-6);
    }

    &.@{button-disabled-class} {
      .setColors(
        @icecream-color-grey-8,
        @icecream-color-grey-4,
        @icecream-color-grey-4
      );
      cursor: not-allowed;
    }

    &.@{button-prefix}-danger {
      .setColors(@icecream-error-color, @icecream-white, @icecream-error-color);

      &:hover {
        .setColors(@icecream-white, @icecream-error-color, @icecream-error-color);
      }
  
      &.@{button-disabled-class} {
        .setColors(
          @icecream-color-grey-8,
          @icecream-color-grey-4,
          @icecream-color-grey-4
        );
      }
    }

    &-loading.@{button-disabled-class} {
      .setColors(@icecream-white, @icecream-color-blue-6, @icecream-color-blue-6);
      cursor: default;

      &.@{button-prefix}-danger {
        .setColors(@icecream-white, @icecream-error-color, @icecream-error-color);
      }
    }
  }

  &-link {
    .setTextSize();
    .setColors(@icecream-color-blue-6, transparent, transparent);

    &:hover {
      .setColors(@icecream-color-blue-4, transparent, transparent);
    }

    &.@{button-disabled-class} {
      .setColors(@icecream-color-grey-8, transparent, transparent);
      cursor: not-allowed;
    }

    &.@{button-prefix}-danger {
      .setColors(@icecream-error-color, transparent, transparent);

      &:hover {
        .setColors(@icecream-color-red-4, transparent, transparent);
      }

      &.@{button-disabled-class} {
        .setColors(@icecream-color-grey-8, transparent, transparent);
      }
    }

    &-loading.@{button-disabled-class} {
      .setColors(@icecream-color-blue-4, transparent, transparent);
      cursor: default;

      &.@{button-prefix}-danger {
        .setColors(@icecream-color-red-4, transparent, transparent);
      }
    }
  }

  &-link {
    padding: 0;
  }

  &-text {
    .setTextSize();
    .setColors(@icecream-color-grey-10, transparent, transparent);

    &:hover {
      .setColors(@icecream-color-blue-6, transparent, transparent);
    }

    &.@{button-disabled-class} {
      .setColors(@icecream-color-grey-8, transparent, transparent);
      cursor: not-allowed;
    }

    &.@{button-prefix}-danger {
      .setColors(@icecream-error-color, transparent, transparent);

      &:hover {
        .setColors(@icecream-color-red-4, transparent, transparent);
      }

      &.@{button-disabled-class} {
        .setColors(@icecream-color-grey-8, transparent, transparent);
      }
    }

    &-loading.@{button-disabled-class} {
      .setColors(@icecream-color-blue-6, transparent, transparent);
      cursor: default;

      &.@{button-prefix}-danger {
        .setColors(@icecream-color-red-4, transparent, transparent);
      }
    }
  }

  &-text {
    padding: 0;
  }

  &-reverse {
    .setSize();
    .setColors(@icecream-color-blue-6, @icecream-white, @icecream-white);

    &:hover {
      .setColors(
        @icecream-color-blue-6,
        @icecream-color-grey-3,
        @icecream-color-grey-3
      );
    }

    &.@{button-disabled-class} {
      .setColors(
        @icecream-color-grey-8,
        @icecream-color-grey-4,
        @icecream-color-grey-4
      );
      cursor: not-allowed;
    }

    &-loading.@{button-disabled-class} {
      .setColors(
        @icecream-color-blue-6,
        @icecream-color-grey-3,
        @icecream-color-grey-3
      );
      cursor: default;
    }
  }

  &-dashed {
    .setSize();
    .setColors(@icecream-color-grey-10, @icecream-white, @icecream-color-grey-7);
    border-style: dashed;

    &:hover {
      .setColors(
        @icecream-primary-color,
        @icecream-white,
        @icecream-primary-color
      );
    }

    &.@{button-disabled-class} {
      .setColors(
        @icecream-color-grey-8,
        @icecream-white,
        @icecream-color-grey-6
      );
      cursor: not-allowed;
    }

    &-loading.@{button-disabled-class} {
      .setColors(
        @icecream-primary-color,
        @icecream-white,
        @icecream-primary-color
      );
      cursor: default;
    }
  }
}

.@{button-prefix} {
  &-content {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    & > &-icon {
      display: inherit;

      + span {
        margin-left: 4px;
      }
    }

    & > &-endicon {
      display: inherit;
      margin-left: 4px;
    }
  }
}