@use "./mixins/mixins.scss" as *;

/* 默认按钮的颜色 */
.x-button {
  --el-button-font-weight: 400;
}
// 默认按钮
.el-button--default{
  --el-button-text-color:var(--color-grey-8);
  --el-button-hover-border-color:var(--color-blue-2);
  --el-button-hover-bg-color:var(--color-blue-1);
  --el-button-active-bg-color:var(--color-blue-2);
}
// 主要按钮
.el-button--primary{
  --el-button-text-color:var(--color-white);
  --el-button-hover-bg-color:var(--color-blue-5) !important;
  --el-button-hover-border-color:var(--color-blue-5) !important;
  --el-button-active-bg-color:#0E5EE1 !important;
}
// 次要按钮
.x-button--minor{
  --el-button-border-color:var(--color-blue-5);
  --el-button-hover-border-color:var(--color-blue-5);
  --el-button-text-color:var(--color-blue-6);
  --el-button-hover-bg-color:var(--color-blue-1);
  --el-button-active-bg-color:var(--color-blue-2);
}
// 危险按钮
.el-button--danger{
  --el-button-text-color:var(--color-white);
  --el-button-hover-bg-color: #FFA39E !important;
  --el-button-hover-border-color:#FFA39E !important;
  --el-button-active-bg-color:#D20A15 !important;
}
// 危险按钮
.el-button--warning{
  --el-button-text-color:var(--color-white);
}
// 危险按钮
.el-button--info{
  --el-button-text-color:var(--color-white);
}

// 尺寸
.el-button--small{
  --el-button-size:28px;
  border-radius:var(--border-radius-2);
  padding:4px 12px;
}
.x-button--mini{
  height: 24px;
  border-radius:var(--border-radius-2);
  padding:4px 8px;
}

.x-button.el-button--text{
  padding-left:0px;
  padding-right: 0px;
}
.x-button + .x-button {
  margin-left: 8px;
} 

/* 图片按钮组件 */

@include b(buttonIcon){
  --x-button-icon-size:32px;
  border: var(--border-base);
  border-radius: var(--border-radius-2);
  padding: 0;
  font-size: 14px;
  text-align: center;
  color: var(--color-grey-8);
  background-color: var(--color-white);
  outline: none;
  cursor: pointer;
  width: calc(var(--x-button-icon-size, 32px) - 2px);
  height: var(--x-button-icon-size);
  line-height: var(--x-button-icon-size);

  @include m(small){
    --x-button-icon-size:28px;
  }

  @include m(mini){
    --x-button-icon-size:24px;
  }
  &:hover,
  &:focus{
    border-color: var(--color-blue-5);
    color: var(--color-blue-6);
    background: var(--color-blue-1);
  }
  &:active{
    border-color: var(--color-blue-6);
  }
  @include when(disabled){
    border: var(--border-base);
    color: var(--color-grey-8);
    background-color: var(--color-white);
    opacity: .4;
    cursor: not-allowed;
  }
  /* 是直接伪造一层蒙版 */
  @include when(loading){
    position: relative;
    pointer-events: none;
    &:before{
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: rgba(255, 255, 255, 0.35);
    }
  }
  & + &{
    margin-left: 8px;
  }
}

.x-buttonIcon + .el-button {
  margin-left: 8px;
}

.el-button + .x-buttonIcon {
  margin-left: 8px;
}