.btn-type(@type) {
  .@{btn-prefix-cls}-@{type}:not(.@{btn-prefix-cls}-disabled) {
    background-color: ~'@{btn-@{type}-color-bg}';
    color: ~'@{btn-@{type}-color-text}';
    border-color: ~'@{btn-@{type}-color-border_disabled}';
    border-width: @btn-size-middle-border-width;
    // border: @btn-size-middle-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border}';

    &:not(.@{btn-prefix-cls}-loading):hover {
      border-color: ~'@{btn-@{type}-color-border_hover}';
      color: ~'@{btn-@{type}-color-text_hover}';
      background-color: ~'@{btn-@{type}-color-bg_hover}';
    }

    &:not(.@{btn-prefix-cls}-loading):active {
      border-color: ~'@{btn-@{type}-color-border_active}';
      color: ~'@{btn-@{type}-color-text_active}';
      background-color: ~'@{btn-@{type}-color-bg_active}';
    }

    &:focus-visible {
      box-shadow: 0 0 0 @btn-box-shadow-radius ~'@{btn-@{type}-color-box-shadow}';
    }
  }

  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-disabled {
    background-color: ~'@{btn-@{type}-color-bg_disabled}';
    color: ~'@{btn-@{type}-color-text_disabled}';
    border-color: ~'@{btn-@{type}-color-border_disabled}';
    border-width: @btn-size-middle-border-width;
    // border: @btn-size-middle-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border_disabled}';
    cursor: not-allowed;
  }
}

.btn-level(@type, @level) {
  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-@{level}:not(.@{btn-prefix-cls}-disabled) {
    background-color: ~'@{btn-@{type}-color-bg_@{level}}';
    color: ~'@{btn-@{type}-color-text_@{level}}';
    border-color: ~'@{btn-@{type}-color-border_@{level}}';

    &:not(.@{btn-prefix-cls}-loading):hover {
      border-color: ~'@{btn-@{type}-color-border_@{level}_hover}';
      color: ~'@{btn-@{type}-color-text_@{level}_hover}';
      background-color: ~'@{btn-@{type}-color-bg_@{level}_hover}';
    }

    &:not(.@{btn-prefix-cls}-loading):active {
      border-color: ~'@{btn-@{type}-color-border_@{level}_active}';
      color: ~'@{btn-@{type}-color-text_@{level}_active}';
      background-color: ~'@{btn-@{type}-color-bg_@{level}_active}';
    }

    &:focus-visible {
      box-shadow: 0 0 0 @btn-box-shadow-radius ~'@{btn-color-box-shadow_@{level}}';
    }
  }

  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-@{level}.@{btn-prefix-cls}-disabled {
    color: ~'@{btn-@{type}-color-text_@{level}_disabled}';
    background-color: ~'@{btn-@{type}-color-bg_@{level}_disabled}';
    border: @btn-size-middle-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border_@{level}_disabled}';
  }
}

.btn-size(@size) {
  .@{btn-prefix-cls}-size-@{size} {
    padding: 0 ~'@{btn-size-@{size}-padding-horizontal}';
    font-size: ~'@{btn-size-@{size}-font-size}';
    height: ~'@{btn-size-@{size}-height}';
    border-radius: ~'@{btn-size-@{size}-radius}';

    > svg + span,
    > span + svg {
      margin-left: ~'@{btn-size-@{size}-icon-spacing}';
    }
    > i + span,
    > span + i {
      margin-left: ~'@{btn-size-@{size}-icon-spacing}';
    }

    // svg {
    //   vertical-align: ~'@{btn-size-@{size}-icon-vertical-align}';
    // }
  }

  @bsp: ~'btn-size-@{size}-padding-horizontal';
  @bsf: ~'btn-size-@{size}-font-size';
  @bss: ~'btn-size-@{size}-icon-spacing';

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-loading-fixed-width.@{btn-prefix-cls}-loading {
    padding-left: @@bsp - ((@@bsf + @@bss) / 2);
    padding-right: @@bsp - ((@@bsf + @@bss) / 2);
  }

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-icon-only {
    width: ~'@{size-@{size}}';
    height: ~'@{size-@{size}}';
    padding: 0;
  }

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-circle {
    width: ~'@{size-@{size}}';
    height: ~'@{size-@{size}}';
    padding: 0;
    text-align: center;
    border-radius: @border-radius-circle;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round {
    border-radius: calc(~'@{size-@{size}}' * 0.5);
  }

  .@{btn-prefix-cls}-group {
    .@{btn-prefix-cls}-size-@{size}:first-child {
      border-radius: ~'@{btn-size-@{size}-radius}' 0 0 ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-size-@{size}:last-child {
      border-radius: 0 ~'@{btn-size-@{size}-radius}' ~'@{btn-size-@{size}-radius}' 0;
    }

    .@{btn-prefix-cls}-size-@{size}:first-child:last-child {
      border-radius: ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5) 0 0 calc(~'@{size-@{size}}' * 0.5);
    }

    .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:last-child {
      border-radius: 0 calc(~'@{size-@{size}}' * 0.5) calc(~'@{size-@{size}}' * 0.5) 0;
    }

    .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child:last-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5);
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}:first-child {
      border-radius: 0 ~'@{btn-size-@{size}-radius}' ~'@{btn-size-@{size}-radius}' 0;
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}:last-child {
      border-radius: ~'@{btn-size-@{size}-radius}' 0 0 ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}:first-child:last-child {
      border-radius: ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child {
      border-radius: 0 calc(~'@{size-@{size}}' * 0.5) calc(~'@{size-@{size}}' * 0.5) 0;
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:last-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5) 0 0 calc(~'@{size-@{size}}' * 0.5);
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child:last-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5);
    }
  }
}