@mixin button-size(
  $height,
  $padding,
  $font-size,
  $radius,
  $text-icon-margin: null
) {
  height: $height;
  padding: $padding;
  font-size: $font-size;
  border-radius: $radius;

  @if $text-icon-margin {
    .nut-button-text {
      margin-left: $text-icon-margin;
      &-right {
        margin-right: $text-icon-margin;
      }
    }
  }

  .nut-icon {
    font-size: $font-size;
    width: $font-size;
    height: $font-size;
  }
  &-children {
    font-size: $font-size;
  }
}

.nut-button {
  position: relative;
  display: flex;
  display: inline-block;
  /* #ifdef harmony dynamic*/
  width: scale-px(80px);
  /* #endif */
  /* #ifndef harmony dynamic*/
  width: auto;
  /* #endif */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: $button-default-height;
  font-size: $button-default-font-size;
  font-weight: $font-weight;
  text-align: center;
  cursor: pointer;
  transition: $button-transition;
  user-select: none;
  touch-action: manipulation;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: $button-default-color;
  background: $button-default-background-color;
  border-width: $button-border-width;

  &-text {
    margin-left: $button-text-icon-margin;
    &-right {
      margin-right: $button-text-icon-margin;
    }
  }

  &-children {
    display: flex;
    flex-direction: row;
    background: transparent;
  }

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: $color-mask;
    border: inherit;
    border-color: $color-mask;
    border-radius: inherit;
    transform: translate(-50%, -50%);
    opacity: 0;
    content: ' ';
    /* #ifdef dynamic*/
    pointer-events: none;
    /* #endif */
    /* #ifndef dynamic*/
    pointer-events: auto;
    /* #endif */
  }

  &::after {
    border: none;
  }

  &:active::before {
    opacity: 0.1;
  }

  &-wrap {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* #ifndef harmony dynamic*/
    background: initial;
    /* #endif */
    .nut-icon {
      font-size: $button-default-font-size;
      width: $button-default-font-size;
      height: $button-default-font-size;
    }
  }

  &-loading,
  &-disabled {
    &::before {
      display: none;
    }
  }

  &.nut-button-disabled {
    cursor: not-allowed;

    // 不带色彩的纯灰禁用 (配合 className 使用)
    &.nut-button-disabled-gray {
      background: var(--nutui-button-disabled-background-color, #ccc);
      color: #fff;
      border-color: var(--nutui-button-disabled-background-color, #ccc);
      opacity: 1;

      .nut-button-desc {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &.nut-button-icononly {
    width: $button-default-height;
    padding: 0;
  }

  &-round {
    border-radius: $button-border-radius;
  }

  &-default {
    padding: $button-default-padding;
    border-style: solid;
    border-color: $button-default-border-color;

    &-disabled,
    &-solid-disabled {
      color: $button-primary-color;
      background: $button-default-disabled;
      border-color: $button-default-disabled;
    }

    &-none {
      &-disabled {
        color: $button-default-disabled-color;
      }
    }

    &-outline,
    &-dashed {
      &-disabled {
        background: transparent;
        color: $button-default-disabled;
        border-color: $button-default-disabled;
      }
    }

    &:active:not(.nut-button-disabled):not(.nut-button-loading) {
      background: $button-default-pressed;
    }
  }

  &-normal {
    padding: $button-normal-padding;
    min-width: scale-px(60px);
  }

  &-has-desc {
    .nut-button-text,
    .nut-button-children {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
    }
    .nut-button-title {
      font-size: scale-font-px(14px);
      font-weight: $font-weight-bold;
    }
    .nut-button-desc {
      font-size: scale-font-px(12px);
      font-weight: $font-weight;
      opacity: 0.8;
      margin-top: scale-px(2px);
    }
  }

  &-xlarge {
    @include button-size(
      $button-xlarge-height,
      $button-xlarge-padding,
      $button-xlarge-font-size,
      $button-xlarge-border-radius,
      $button-xlarge-text-icon-margin
    );
    font-weight: $font-weight-bold;
  }

  &-44 {
    @include button-size(
      $button-44-height,
      $button-44-padding,
      $button-44-font-size,
      $button-44-border-radius,
      $button-xlarge-text-icon-margin
    );
    font-weight: $font-weight-bold;
  }

  &-large {
    @include button-size(
      $button-large-height,
      $button-large-padding,
      $button-large-font-size,
      $button-large-border-radius,
      $button-xlarge-text-icon-margin
    );
    min-width: scale-px(84px);
  }

  &-36 {
    @include button-size(
      $button-36-height,
      $button-36-padding,
      $button-36-font-size,
      $button-36-border-radius,
      $button-xlarge-text-icon-margin
    );
    min-width: scale-px(66px);
  }

  &-small {
    @include button-size(
      $button-small-height,
      $button-small-padding,
      $button-small-font-size,
      $button-small-border-radius
    );
    min-width: scale-px(52px);
    font-weight: $font-weight;
  }

  &-mini {
    @include button-size(
      $button-mini-height,
      $button-mini-padding,
      $button-mini-font-size,
      $button-mini-border-radius
    );
    min-width: scale-px(48px);
    font-weight: $font-weight;
  }

  $button-colors: (
    'primary': (
      $button-primary-color,
      $button-primary-background-color,
      $button-primary-border-color,
      $button-primary-border-color,
      $button-primary-disabled,
      $button-primary-color,
      $button-primary-disabled,
      $button-primary-disabled,
      $button-primary-disabled,
      null,
      $button-primary-pressed,
    ),
    'success': (
      $button-success-color,
      $button-success-background-color,
      $button-success-border-color,
      $button-success-border-color,
      $button-success-disabled,
      $button-success-color,
      $button-primary-disabled,
      $button-primary-disabled,
      $button-success-disabled,
      null,
      $button-success-pressed,
    ),
    'info': (
      $button-info-color,
      $button-info-background-color,
      $button-info-border-color,
      $button-info-border-color,
      $button-info-disabled,
      $button-info-color,
      $button-info-disabled,
      $button-info-disabled,
      $button-info-disabled,
      null,
      $button-info-pressed,
    ),
    'danger': (
      $button-danger-color,
      $button-danger-background-color,
      $button-danger-border-color,
      $button-danger-border-color,
      $button-danger-disabled,
      $button-danger-color,
      $button-danger-disabled,
      $button-danger-disabled,
      $button-danger-disabled,
      null,
      $button-danger-pressed,
    ),
    'warning': (
      $button-warning-color,
      $button-warning-background-color,
      $button-warning-border-color,
      $button-warning-border-color,
      $button-warning-disabled,
      $button-warning-color,
      $button-warning-disabled,
      $button-warning-disabled,
      $button-warning-disabled,
      null,
      $button-warning-pressed,
    ),
    'service': (
      $button-service-color,
      $button-service-background-color,
      $button-service-color,
      $button-service-border-color,
      $button-service-disabled,
      $button-service-color,
      $button-service-color,
      $button-service-disabled,
      $button-service-color,
      0.5,
      $button-service-pressed,
    ),
  );

  @each $type, $colors in $button-colors {
    $text-color: nth($colors, 1);
    $bg-color: nth($colors, 2);
    $outline-text-color: nth($colors, 3);
    $outline-border-color: nth($colors, 4);
    $disabled-bg: nth($colors, 5);
    $disabled-text-color: nth($colors, 6);
    $outline-disabled-text-color: nth($colors, 7);
    $outline-disabled-border-color: nth($colors, 8);
    $none-disabled-text-color: nth($colors, 9);
    $opacity-disabled: nth($colors, 10);
    $pressed-bg: nth($colors, 11);

    &-#{$type} {
      color: $text-color;
      background: $bg-color;
      background-origin: border-box;
      border-color: transparent;

      &-children {
        color: $text-color;
      }

      &-disabled,
      &-solid-disabled {
        @if $opacity-disabled {
          opacity: $opacity-disabled;
        }
        color: $disabled-text-color;
        background: $disabled-bg;
        border-color: $disabled-bg;
      }

      &-outline,
      &-dashed {
        color: $outline-text-color;
        border-color: $outline-border-color;

        .nut-button-#{$type}-children {
          color: $outline-text-color;
        }

        &-disabled {
          @if $opacity-disabled {
            opacity: $opacity-disabled;
          }
          color: $outline-disabled-text-color;
          border-color: $outline-disabled-border-color;

          .nut-button-#{$type}-children {
            color: $outline-disabled-text-color;
          }
        }
      }

      &-none {
        color: $outline-text-color;

        .nut-button-#{$type}-children {
          color: $outline-text-color;
        }

        &-disabled {
          @if $opacity-disabled {
            opacity: $opacity-disabled;
          }
          color: $none-disabled-text-color;

          .nut-button-#{$type}-children {
            color: $none-disabled-text-color;
          }
        }
      }

      // pressed / active states
      &:active:not(.nut-button-disabled):not(.nut-button-loading):not(
          .nut-button-outline
        ):not(.nut-button-dashed) {
        background: $pressed-bg;
      }

      @if $type == 'primary' {
        &-solid {
          font-weight: $font-weight-bold;
          &.nut-button-small,
          &.nut-button-mini {
            font-weight: $font-weight;
          }
        }

        &.nut-button-solid.nut-button-normal {
          font-weight: $font-weight-bold;
        }

        &-light {
          color: $button-primary-light-color;
          background: $button-primary-light-background-color;
          border-color: $button-primary-light-border-color;

          .nut-button-primary-children {
            color: $button-primary-light-color;
          }

          &-disabled {
            opacity: 0.5;

            .nut-button-primary-children {
              color: $button-primary-light-color;
            }
          }

          // press state for primary-light
          &:active:not(.nut-button-disabled):not(.nut-button-loading):not(
              .nut-button-outline
            ):not(.nut-button-dashed) {
            background: $color-primary-light-pressed;
          }
        }
      }
    }
  }

  &-golden {
    color: $color-service-text;
    background: $color-service-btn-bg;
    background-origin: border-box;
    border-color: transparent;

    &-children {
      color: $color-service-text;
    }

    &-disabled,
    &-solid-disabled {
      opacity: 0.5;
      color: $color-service-text;
      background: $color-service-btn-bg-disabled;
      border-color: $color-service-btn-bg-disabled;
    }

    &-outline,
    &-dashed {
      color: $color-service-text;
      border-color: $color-service-border;

      &-disabled {
        opacity: 0.5;
        color: $color-service-text;
        border-color: $color-service-btn-bg-disabled;
      }
    }

    &-none {
      color: $color-service-text;
      &-disabled {
        color: $color-service;
      }
    }
  }

  &-block {
    display: block;
    width: 100%;
  }

  &-outline {
    background: transparent;
    border-style: solid;
  }

  &-dashed {
    background: transparent;
    border-style: dashed;
  }

  &-none {
    background: transparent;
    border-color: transparent;
  }

  &-loading {
    cursor: default;
    opacity: 0.9;
  }

  &-square {
    border-radius: $button-square-border-radius;
  }
}

[dir='rtl'] .nut-button,
.nut-rtl .nut-button {
  &-text {
    margin-left: 0;
    margin-right: $button-text-icon-margin;

    &.right {
      margin-left: $button-text-icon-margin;
    }
  }

  &::before {
    left: auto;
    right: 50%;
    transform: translate(50%, -50%);
  }
}

.nut-theme-dark {
  // button primary-light
  --nutui-button-primary-light-color: var(--nutui-color-primary);
  --nutui-button-primary-light-background-color: rgba(250, 44, 25, 0.15);
  --nutui-button-primary-light-border-color: transparent;
}