@import '../layout';

// 1、先写常量设置
// page {
//   // 设置圆角
//   --button-border-radius: 0.08rem;
//   --button-default-width: 3rem;
//   --button-default-height: 0.76rem;
//   --button-line-height: 0.76rem;
//   --button-normal-font-size: 0.32rem;
//   --button-default-font-size: 0.32rem;
// }

//2、常量无法满足，再进行样式

// 所有按钮背景图
@mixin bgMixin(
  $beforeWidth: $button-guandan-bg-before-md-width,
  $beforeHeight: $button-guandan-bg-before-md-height,
  $beforeBg: $button-guandan-bg-before-md-img,
  $beforeBottom: 0
) {
  &::before {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    background: url('https://image-1251917893.file.myqcloud.com/guandan-match/common/img/base/button-bg3.png')
      no-repeat center !important;
    background-size: contain !important;
    pointer-events: none !important;
    transform: unset !important;
    opacity: 1 !important;
  }

  &::after {
    content: none !important;
  }
}

// 所有按钮icon样式方法
@mixin iconMixin($iconWidth, $iconHeight, $iconMarginRight) {
  // icon
  .press-button__icon,
  .press-icon-plus--image {
    width: $iconWidth !important;
    height: $iconHeight !important;
    display: flex !important;
  }

  press-button__icon {
    margin-right: $iconMarginRight;
  }

  .press-icon-plus {
    // 补全自定义需要引入的iconfont样式
    font-family: 'iconfont' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
// 设置按钮icon样式
@mixin setIconMixin() {
  @include iconMixin(.28rem, .28rem, .06rem);

  &-lg {
    // icon
    @include iconMixin(.32rem, .32rem, .08rem);
  }

  &-nl {
    // icon
    @include iconMixin(.28rem, .28rem, .06rem);
  }

  &-sl {
    // icon
    @include iconMixin(.18rem, .18rem, 0);
  }

  &-mi {
    // icon
    @include iconMixin(.16rem, .16rem, -.12rem);
  }
}
// 设置字体大小宽高圆角样式
@mixin setFontWidthHeightMixin(
  $width: $button-normal-min-width,
  $height: $button-normal-height,
  $fontSize: $button-normal-font-size,
  $radius: $button-border-radius
) {
  width: $width;
  height: var(--button-default-height, $height) !important;
  line-height: var(--button-line-height, $height) !important;
  font-size: var(--button-default-font-size, $fontSize) !important;
  font-weight: 700;
  border-radius: var(--button-border-radius, $radius) !important;
}

// 1.普通按钮背景色
@mixin primaryMixin() {
  color: $color-white;
  background: $color-primary-btn !important;
  border: 0; // 没有border
  // 按压态
  &:not(.press-button--unclickable):active {
    background: $color-primary-active !important;
  }
}
// 2.镂空按钮背景色
@mixin borderMixin() {
  /* 基本样式 */
  position: relative; /* 相对于自身定位伪元素 */
  color: #feac2d !important; /* 文本颜色 */
  // border: none; /* 移除默认的边框 */
  background: transparent !important; /* 背景透明 */
  border-radius: .08rem; /* 圆角 */

  /* 渐变边框的模拟 */
  &::before {
    opacity: 1 !important;
    content: ''; /* 必须设置，否则伪元素不会生成 */
    position: absolute; /* 相对于父元素定位 */
    transform: none !important;
    width: unset !important;
    height: unset !important;
    top: 1px !important;
    right: 1px !important;
    bottom: 1px !important;
    left: 1px !important; /* 稍微移出以创建边框效果 */
    background: linear-gradient(
      60deg,
      #ff7e5f,
      #feb47b
    ) !important; /* 渐变背景 */
    padding: 1px !important;
    mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0) border-box !important;
    mask-composite: exclude !important;
    border-radius: .08rem !important;
    z-index: 0; /* 放在内容之后 */
  }

  &:active {
    &::after {
      left: 2px;
      right: 2px;
      top: 2px;
      bottom: 2px;
      background-color: #fff6ed;
      border-radius: .08rem;
      z-index: 0;
    }
  }
}

// 3.二级按钮背景色
@mixin secondaryMixin() {
  color: #69736e;
  background-color: #e3e9e6;
  border: 0; // 没有border
  font-weight: 400;
  // 按压态
  &:not(.press-button--unclickable):active {
    background-color: #cfd4d2;
  }
}

// 具体按钮样式设置
.press-button {
  // icon大小设置
  @include setIconMixin();
  // 普通按钮：不带背景
  &--guandan-primary {
    // 宽高字体
    @include setFontWidthHeightMixin(
      $button-normal-min-width,
      $button-normal-height,
      $button-normal-font-size,
      $button-border-radius
    );
    @include primaryMixin();
    // icon大小设置
    @include setIconMixin();

    &-lg,
    &-nl,
    &-sl,
    &-mi {
      // 背景色等
      @include primaryMixin();
    }

    &-lg {
      @include setFontWidthHeightMixin(
        $button-large-min-width,
        $button-large-height,
        $button-large-font-size,
        $button-border-radius
      );
    }

    &-nl {
      @include setFontWidthHeightMixin(
        $button-normal-min-width,
        $button-normal-height,
        $button-normal-font-size,
        $button-border-radius
      );
    }

    &-sl {
      @include setFontWidthHeightMixin(
        $button-small-min-width,
        $button-small-height,
        $button-small-font-size,
        $button-border-radius
      );
    }

    &-mi {
      @include setFontWidthHeightMixin(
        $button-mini-min-width,
        $button-mini-height,
        $button-mini-font-size,
        $button-border-radius-mini
      );
    }
  }
  // 普通按钮：带背景
  &--guandan-bg {
    // 宽高字体
    @include setFontWidthHeightMixin(
      $button-normal-min-width,
      $button-normal-height,
      $button-normal-font-size,
      $button-border-radius
    );
    // 背景色等
    @include primaryMixin();
    // 背景图
    @include bgMixin();
    // 大小设置
    @include setIconMixin();

    &-lg,
    &-nl,
    &-sl,
    &-mi {
      // 背景色等
      @include primaryMixin();
      // 背景图
      @include bgMixin();
    }

    &-lg {
      @include setFontWidthHeightMixin(
        $button-large-min-width,
        $button-large-height,
        $button-large-font-size,
        $button-border-radius
      );
    }

    &-nl {
      @include setFontWidthHeightMixin(
        $button-normal-min-width,
        $button-normal-height,
        $button-normal-font-size,
        $button-border-radius
      );
    }

    &-sl {
      @include setFontWidthHeightMixin(
        $button-small-min-width,
        $button-small-height,
        $button-small-font-size,
        $button-border-radius
      );
    }

    &-mi {
      @include setFontWidthHeightMixin(
        $button-mini-min-width,
        $button-mini-height,
        $button-mini-font-size,
        $button-border-radius-mini
      );
    }
  }
  // 二级按钮：灰色
  &--guandan-secondary {
    // 宽高字体
    @include setFontWidthHeightMixin(
      $button-normal-min-width,
      $button-normal-height,
      $button-normal-font-size,
      $button-border-radius
    );
    // 背景色等
    @include secondaryMixin();
    // 背景图
    @include bgMixin();
    // 大小设置
    @include setIconMixin();

    &-lg,
    &-nl,
    &-sl,
    &-mi {
      // 背景色等
      @include secondaryMixin();
      // 背景图
      @include bgMixin();
    }

    &-lg {
      @include setFontWidthHeightMixin(
        $button-large-min-width,
        $button-large-height,
        $button-large-font-size,
        $button-border-radius
      );
    }

    &-nl {
      @include setFontWidthHeightMixin(
        $button-normal-min-width,
        $button-normal-height,
        $button-normal-font-size,
        $button-border-radius
      );
    }

    &-sl {
      @include setFontWidthHeightMixin(
        $button-small-min-width,
        $button-small-height,
        $button-small-font-size,
        $button-border-radius
      );
    }

    &-mi {
      @include setFontWidthHeightMixin(
        $button-mini-min-width,
        $button-mini-height,
        $button-mini-font-size,
        $button-border-radius-mini
      );
    }
  }
  // 镂空按钮
  &--guandan-border {
    // 宽高字体
    @include setFontWidthHeightMixin(
      $button-normal-min-width,
      $button-normal-height,
      $button-normal-font-size,
      $button-border-radius
    );
    // 背景色等
    @include borderMixin();
    // 大小设置
    @include setIconMixin();

    &-lg,
    &-nl,
    &-sl,
    &-mi {
      // 背景色等
      @include borderMixin();
    }

    &-lg {
      @include setFontWidthHeightMixin(
        $button-large-min-width,
        $button-large-height,
        $button-large-font-size,
        $button-border-radius
      );
    }

    &-nl {
      @include setFontWidthHeightMixin(
        $button-normal-min-width,
        $button-normal-height,
        $button-normal-font-size,
        $button-border-radius
      );
    }

    &-sl {
      @include setFontWidthHeightMixin(
        $button-small-min-width,
        $button-small-height,
        $button-small-font-size,
        $button-border-radius
      );
    }

    &-mi {
      @include setFontWidthHeightMixin(
        $button-mini-min-width,
        $button-mini-height,
        $button-mini-font-size,
        $button-border-radius-mini
      );
    }
  }
  // 所有按钮disabled：需个性化设置
  &-disabled {
    opacity: var(--button-disabled-opacity, $button-disabled-opacity);
  }
}