.yc-button {
  cursor: pointer;
  user-select: none;
  outline: none;
  border: 1px solid transparent;
  font-weight: 400;
  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
  display: inline-flex;
  justify-content: center;
  align-items: center;

  .yc-button-icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .yc-spin {
      font-size: inherit;
      color: inherit;
    }
  }
}
// loading
.yc-button-loading,
.yc-button-disabled {
  cursor: default;
  position: relative;
  &::before {
    content: '';
    z-index: 1;
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-color: #fff;
    opacity: 0.4;
    display: block;
  }
  &.yc-button-disabled {
    cursor: not-allowed;
    &::before {
      cursor: not-allowed;
    }
  }
}
// loading
.yc-button-long {
  width: 100%;
}
// type
@type: {
  @primary: {
    @normal: {
      bg: rgb(var(--primary-6));
      hover: rgb(var(--primary-5));
      active: rgb(var(--primary-7));
      text: var(--color-white);
    };
    @warning: {
      bg: rgb(var(--warning-6));
      hover: rgb(var(--warning-5));
      active: rgb(var(--warning-7));
      text: var(--color-white);
    };
    @success: {
      bg: rgb(var(--success-6));
      hover: rgb(var(--success-5));
      active: rgb(var(--success-7));
      text: var(--color-white);
    };
    @danger: {
      bg: rgb(var(--danger-6));
      hover: rgb(var(--danger-5));
      active: rgb(var(--danger-7));
      text: var(--color-white);
    };
  };
  @secondary: {
    @normal: {
      bg: var(--color-fill-2);
      hover: var(--color-fill-3);
      active: var(--color-fill-4);
      text: var(--color-text-2);
    };
    @warning: {
      bg: var(--color-warning-light-1);
      hover: var(--color-warning-light-2);
      active: var(--color-warning-light-3);
      text: rgb(var(--warning-6));
    };
    @success: {
      bg: var(--color-success-light-1);
      hover: var(--color-success-light-2);
      active: var(--color-success-light-3);
      text: rgb(var(--success-6));
    };
    @danger: {
      bg: var(--color-danger-light-1);
      hover: var(--color-danger-light-2);
      active: var(--color-danger-light-3);
      text: rgb(var(--danger-6));
    };
  };
  @dashed: {
    @normal: {
      bg: transparent;
      hover: var(--color-fill-2);
      active: var(--color-fill-3);
      border: var(--color-border-2);
      border-hover: var(--color-border-3);
      border-active: var(--color-border-4);
      text: var(--color-text-2);
    };
    @warning: {
      bg: var(--color-warning-light-1);
      hover: var(--color-warning-light-2);
      active: var(--color-warning-light-3);
      border: rgb(var(--warning-2));
      border-hover: rgb(var(--warning-3));
      border-active: rgb(var(--warning-4));
      text: rgb(var(--warning-6));
    };
    @success: {
      bg: var(--color-success-light-1);
      hover: var(--color-success-light-2);
      active: var(--color-success-light-3);
      border: rgb(var(--success-2));
      border-hover: rgb(var(--success-3));
      border-active: rgb(var(--success-4));
      text: rgb(var(--success-6));
    };
    @danger: {
      bg: var(--color-danger-light-1);
      hover: var(--color-danger-light-2);
      active: var(--color-danger-light-3);
      border: rgb(var(--danger-2));
      border-hover: rgb(var(--danger-3));
      border-active: rgb(var(--danger-4));
      text: rgb(var(--danger-6));
    };
  };
  @outline: {
    @normal: {
      bg: transparent;
      border: rgb(var(--primary-6));
      border-hover: rgb(var(--primary-5));
      border-active: rgb(var(--primary-7));
      text: rgb(var(--primary-6));
      text-hover: rgb(var(--primary-5));
      text-active: rgb(var(--primary-7));
    };
    @warning: {
      bg: transparent;
      border: rgb(var(--warning-6));
      border-hover: rgb(var(--warning-5));
      border-active: rgb(var(--warning-7));
      text: rgb(var(--warning-6));
      text-hover: rgb(var(--warning-5));
      text-active: rgb(var(--warning-7));
    };
    @success: {
      bg: transparent;
      border: rgb(var(--success-6));
      border-hover: rgb(var(--success-5));
      border-active: rgb(var(--success-7));
      text: rgb(var(--success-6));
      text-hover: rgb(var(--success-5));
      text-active: rgb(var(--success-7));
    };
    @danger: {
      bg: transparent;
      border: rgb(var(--danger-6));
      border-hover: rgb(var(--danger-5));
      border-active: rgb(var(--danger-7));
      text: rgb(var(--danger-6));
      text-hover: rgb(var(--danger-5));
      text-active: rgb(var(--danger-7));
    };
  };
  @text: {
    @normal: {
      text: rgb(var(--primary-6));
    };
    @warning: {
      text: rgb(var(--warning-6));
    };
    @success: {
      text: rgb(var(--success-6));
    };
    @danger: {
      text: rgb(var(--danger-6));
    };
  };
};
each(@type, .(@type-value, @type-name) {
  @type-key: replace(~"@{type-name}", "@", "");
  .yc-button-@{type-key} {
    // 遍历每种状态 (normal, warning, success, danger)
    each(@type-value, .(@status-value, @status-name) {
      @status-key: replace(~"@{status-name}", "@", "");
      &.yc-button-status-@{status-key} {
        each(@status-value, .(@value, @key) {
          & when (@key = bg) {
            background-color: @value;
          }
          & when (@key = text) {
            color: @value;
          }
          & when (@key = border) {
            border-color: @value;
          }
          //  应用交互状态样式 (hover/active)
          &:not(.yc-button-disabled):not(.yc-button-loading) {
            &:hover {
              & when (@key = hover) { background-color: @value; }
              & when (@key = text-hover) { color: @value; }
              & when (@key = border-hover) { border-color: @value; }
            }
            &:active {
              & when (@key = active) { background-color: @value; }
              & when (@key = text-active) { color: @value; }
              & when (@key = border-active) { border-color: @value; }
            }
          }
        });
        // 处理特定按钮类型的样式覆盖 (这些是基于类型，而非属性)
        & when (@type-key = dashed) {
          border-style: dashed;
        }
        & when (@type-key = text) {
          background-color: transparent;
          &:not(.yc-button-disabled):not(.yc-button-loading) {
            &:hover {
              background-color: var(--color-fill-2);
            }
            &:active {
              background-color: var(--color-fill-3);
            }
          }
        }
      }
    });
  }
});
// size
@size: {
  @mini: {
    height: 24px;
    padding: 11px;
    margin-right: 4px;
  };
  @small: {
    height: 28px;
    padding: 15px;
    margin-right: 6px;
  };
  @medium: {
    height: 32px;
    padding: 15px;
    margin-right: 8px;
  };
  @large: {
    height: 36px;
    padding: 19px;
    margin-right: 8px;
  };
};
each(@size,.(@value,@name){
       @key: replace(~"@{name}", "@", "");
       @font-size:if(@key=mini,12px,14px);
      .yc-button-size-@{key} {
        height: @value[height];
        padding: 0  @value[padding];
        font-size: @font-size;
        .yc-button-icon {
          width: @font-size;
          height: @font-size;
          margin-right: @value[margin-right];
        }
        &.yc-button-shape-circle{
          width: @value[height];
          padding: 0;
        }
        &.yc-button-only-icon{
          width: @value[height];
          padding: 0;
          .yc-button-icon {
            margin: 0 ;
          }
        }
      }
    });
// shape
@shape: {
  square: var(--border-radius-small);
  round: 30px;
  circle: var(--border-radius-circle);
};
each(@shape, {
      .yc-button-shape-@{key} {
        border-radius: @value;
      }
});
