@use 'sass:list';
@use '../style/base' as *;

@include bem(button) {
  @include b() {
    @include universal;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    border: none;
    vertical-align: middle;
    font-family: inherit;
    line-height: var(--sar-button-line-height);
    white-space: nowrap;
    text-align: center;
    user-select: none;
    cursor: pointer;
    overflow: visible;
  }

  @include m(block) {
    display: flex;
    flex: auto;
  }

  // border
  &::after {
    @include border-surround(currentColor);
    display: none;
  }

  // shade
  &::before {
    @include universal;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
    background: var(--sar-button-active-bg);
    pointer-events: none;
  }

  // # 尺寸
  @include m(mini) {
    @include button-size(
      var(--sar-button-height-mini),
      var(--sar-button-padding-y-mini),
      var(--sar-button-padding-x-mini),
      var(--sar-button-border-radius-mini),
      var(--sar-button-font-size-mini)
    );

    @include e(icon) {
      font-size: var(--sar-button-icon-size-mini);
    }
  }

  @include m-intersect(mini, iconic) {
    min-width: var(--sar-button-height-mini);
  }

  @include m(small) {
    @include button-size(
      var(--sar-button-height-sm),
      var(--sar-button-padding-y-sm),
      var(--sar-button-padding-x-sm),
      var(--sar-button-border-radius-sm),
      var(--sar-button-font-size-sm)
    );

    @include e(icon) {
      font-size: var(--sar-button-icon-size-sm);
    }
  }

  @include m-intersect(small, iconic) {
    min-width: var(--sar-button-height-sm);
  }

  @include m(medium) {
    @include button-size(
      var(--sar-button-height),
      var(--sar-button-padding-y),
      var(--sar-button-padding-x),
      var(--sar-button-border-radius),
      var(--sar-button-font-size)
    );

    @include e(icon) {
      font-size: var(--sar-button-icon-size);
    }
  }

  @include m-intersect(medium, iconic) {
    min-width: var(--sar-button-height);
  }

  @include m(large) {
    @include button-size(
      var(--sar-button-height-lg),
      var(--sar-button-padding-y-lg),
      var(--sar-button-padding-x-lg),
      var(--sar-button-border-radius-lg),
      var(--sar-button-font-size-lg)
    );

    @include e(icon) {
      font-size: var(--sar-button-icon-size-lg);
    }
  }

  @include m-intersect(large, iconic) {
    min-width: var(--sar-button-height-lg);
  }

  // ## 显示边框
  @include m(outline) {
    &::after {
      display: flex;
    }
  }

  // # 主题色
  @each $theme, $value in $sar-theme-colors {
    $color: list.nth($value, 1);
    $color-rgb: list.nth($value, 2);

    // ## 默认类型
    @include m(default-#{$theme}) {
      @include button-set-theme {
        color: var(--sar-white);
        background-color: $color;
      }
    }

    // ## 淡颜色类型
    @include m(pale-#{$theme}) {
      @include button-set-theme {
        color: $color;
        background-color: rgba($color-rgb, var(--sar-button-pale-bg-opacity));
      }
    }

    // ## 温和类型
    @include m(mild-#{$theme}) {
      @include button-set-theme {
        color: $color;
        background: var(--sar-button-mild-bg);
      }
    }

    // ## 轮廓类型
    @include m(outline-#{$theme}) {
      @include button-set-theme {
        color: $color;
        background-color: transparent;
      }
    }

    // ## 文本类型
    @include m(text-#{$theme}) {
      @include button-set-theme {
        color: $color;
        background-color: transparent;
      }
    }

    // ## 淡文本类型
    @include m(pale-text-#{$theme}) {
      @include button-set-theme {
        color: $color;
        background-color: transparent;
      }
    }
  }

  // # 圆形按钮
  @include m(round) {
    border-radius: var(--sar-rounded-full);

    &::after {
      border-radius: var(--sar-rounded-full);
    }
  }

  // # 方形按钮
  @include m(square) {
    border-radius: 0;

    &::after {
      border-radius: 0;
    }
  }

  // # active 状态
  @include m(default, pale, mild, outline, text) {
    &:not(#{bem($b: button, $m: disabled)}):not(
        #{bem($b: button, $m: loading)}
      ):active::before {
      opacity: 1;
    }
  }

  @include m(pale-text) {
    &:not(#{bem($b: button, $m: disabled)}):not(
        #{bem($b: button, $m: loading)}
      ):active {
      opacity: var(--sar-button-active-opacity);
    }
  }

  // # 禁用状态
  @include m(disabled) {
    @include disabled;

    &::after {
      z-index: 0;
    }
  }

  // # 加载状态
  @include m(loading) {
    opacity: var(--sar-button-loading-opacity);
    cursor: var(--sar-button-loading-cursor);
  }

  // # 图标
  @include e(icon) {
    display: inline-flex;

    @include m(with-slot) {
      margin-right: var(--sar-button-icon-margin-right);
    }
  }

  // # 紧凑模式
  @include m(compact-horizontal) {
    &:not(:first-child) {
      &,
      &:after {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    &:not(:last-child) {
      &,
      &:after {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &#{bem($b: button, $m: default)},
    &#{bem($b: button, $m: pale)},
    &#{bem($b: button, $m: mild)} {
      & + #{bem($b: button, $m: default)},
      & + #{bem($b: button, $m: pale)},
      & + #{bem($b: button, $m: mild)} {
        &::after {
          right: auto;
          display: block;
          width: 0;
          height: 100%;
          border: none;
          border-radius: 0;
          @include border-left(var(--sar-body-bg));
        }
      }
    }
  }

  @include m(compact-vertical) {
    &:not(:first-child) {
      &,
      &:after {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }
    &:not(:last-child) {
      &,
      &:after {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &#{bem($b: button, $m: default)},
    &#{bem($b: button, $m: pale)},
    &#{bem($b: button, $m: mild)} {
      & + #{bem($b: button, $m: default)},
      & + #{bem($b: button, $m: pale)},
      & + #{bem($b: button, $m: mild)} {
        &::after {
          bottom: auto;
          display: block;
          width: 100%;
          height: 0;
          border: none;
          border-radius: 0;
          @include border-top(var(--sar-body-bg));
        }
      }
    }
  }

  @include m-intersect(compact-horizontal, outline) {
    & + #{bem($b: button, $m: outline)} {
      &::after {
        border-left-color: transparent;
      }
    }
  }

  @include m-intersect(compact-vertical, outline) {
    & + #{bem($b: button, $m: outline)} {
      &::after {
        border-top-color: transparent;
      }
    }
  }
}