@import '../../style/theme/default.less';

@btn-prefix-cls: ~'@{kui-prefix}-btn';

.@{btn-prefix-cls} {
  display: inline-block;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: solid 1px;
  transition: background-color 0.15s, border-color 0.15s;

  &-type-primary {
    color: #fff;
    background-color: @primary-color;
    border-color: @primary-color;

    &:active {
      background-color: rgba(35, 76, 234, 1);
      border-color: rgba(35, 76, 234, 1);
    }
  }

  &-type-minor {
    color: @text-color;
    background-color: rgba(240, 240, 240, 1);
    border-color: rgba(240, 240, 240, 1);

    &:active {
      background-color: rgba(227, 227, 227, 1);
      border-color: rgba(227, 227, 227, 1);
    }
  }

  &-type-danger {
    color: #fff;
    background-color: @danger-color;
    border-color: @danger-color;

    &:active {
      background-color: @danger-color - 20;
      border-color: @danger-color - 20;
    }
  }

  &-plain&-type-primary {
    color: @primary-color;
    background-color: #fff;
    border: solid 1px @primary-color;
  }

  &-plain&-type-minor {
    color: #333;
    background-color: #fff;
    border: solid 1px rgba(222, 222, 222, 1);
  }

  &-plain&-type-danger {
    color: @danger-color;
    background-color: #fff;
    border: solid 1px @danger-color;
  }

  &-shape-rect {
    border-radius: 12px;
  }

  &-shape-circle&-size-normal {
    border-radius: 47px;
  }

  &-shape-circle&-size-small {
    border-radius: 35px;
  }

  &-size-normal {
    height: 94px;
    padding: 0 50px;
    font-size: 36px;
  }

  &-size-small {
    height: 60px;
    padding: 0 36px;
    font-size: 28px;
  }

  &-shadow {
    box-shadow: 0 5px 20px 0 rgba(28, 86, 245, 0.4);
  }

  &-loading {
    margin-right: 10px;
    vertical-align: middle;
  }

  &-text {
    line-height: 1.5;
    vertical-align: middle;
  }

  .disabled() {
    cursor: not-allowed;
    opacity: 0.4;
  }

  &-disabled {
    .disabled();
  }

  &-disabled&-type-primary:active {
    .disabled();
  }

  &-disabled&-type-danger:active {
    .disabled();
  }
}