/**
 * 自定义按钮样式，为 a-button 添加 custom-button 类，并传入相应的 type，size，disabled
 * 默认尺寸按钮：size="default" 大尺寸按钮：size="large"
 * 置灰状态按钮：disabled
 * 无边框按钮： type="text" class="custom-button"
 * 灰色边框按钮： type="default" class="custom-button"
 * 蓝色边框按钮： type="default" class="custom-button btn-outline"
 * 蓝色背景按钮： type="primary" class="custom-button"
 */
.custom-modal .ant-modal-footer .ant-btn,
.custom-button,
.ant-btn.custom-button {
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 4px;
  letter-spacing: 0;
  word-spacing: 0;

  //font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  cursor: pointer;

  &.ant-btn-default {
    &:not([disabled]) {
      border-color: #d9d9d9;
      color: #262626;

      svg path {
        fill: #262626;
      }

      &:hover {
        border-color: $yili-default-color;
        color: $yili-default-color;

        svg path {
          fill: $yili-default-color;
        }
      }
    }

    &[disabled] {
      border-color: #d9d9d9;
      background-color: #fff;
      color: #bfbfbf;

      svg path {
        fill: #bfbfbf;
      }
    }
  }

  &.btn-outline {
    &:not([disabled]) {
      border-color: $yili-btn-check-color;
      color: $yili-default-color;

      svg path {
        fill: $yili-default-color;
      }

      &:hover {
        border-color: $yili-btn-check-color;
        color: $yili-btn-check-color;

        svg path {
          fill: $yili-btn-check-color;
        }
      }
    }

    &[disabled] {
      border-color: $yili-disabled-color;
      background-color: #fff;
      color: $yili-disabled-color;

      svg path {
        fill: $yili-disabled-color;
      }
    }
  }

  &.ant-btn-primary {
    &:not([disabled]) {
      border-color: $yili-default-color;
      background-color: $yili-default-color;

      svg path {
        fill: #fff;
      }

      &:hover {
        border-color: $yili-btn-check-color;
        background-color: $yili-btn-check-color;

        svg path {
          fill: #fff;
        }
      }
    }

    &[disabled] {
      border-color: $yili-disabled-color;
      background-color: $yili-disabled-color;
      color: #fff;

      svg path {
        fill: #fff;
      }
    }
  }

  &.ant-btn-text {
    &:not([disabled]) {
      color: $yili-default-color;

      svg path {
        fill: $yili-default-color;
      }

      &:hover {
        background-color: #fff;
        color: $yili-btn-check-color;

        svg path {
          fill: $yili-btn-check-color;
        }
      }
    }

    &[disabled] {
      color: $yili-disabled-color;

      svg path {
        fill: $yili-disabled-color;
      }
    }
  }

  &.ant-btn-link {
    color: $yili-default-color;
  }

  &.ant-btn-lg {
    height: 42px;
    border-radius: 6px;
    font-size: 16px;
  }

  &:not(.ant-btn-lg) ::v-deep {
    > .anticon + span,
    > span + .anticon {
      margin-left: 6px;
    }
  }
}
