@mixin button-theme(
  $background,
  $border,
  $color,
  $hover-background,
  $hover-border,
  $hover-color,
  $active-background,
  $active-border,
  $active-color,
  $disabled-background,
  $disabled-border,
  $disabled-color,
  $disabled-opacity
) {
  background-color: $background;
  border-color: $border;
  color: $color;

  &:hover,
  &:focus {
    background-color: $hover-background;
    border-color: $hover-border;
    color: $hover-color;
  }

  &:active {
    background-color: $active-background;
    border-color: $active-border;
    color: $active-color;
  }

  @include m(disabled) {
    background-color: $disabled-background;
    border-color: $disabled-border;
    color: $disabled-color;
    opacity: $disabled-opacity;
    cursor: not-allowed;

    &:active,
    &:focus,
    &:hover,
    &:visited {
      background-color: $disabled-background;
      border-color: $disabled-border;
      color: $disabled-color;
    }
  }

  @include m(loading) {
    background-color: $disabled-background;
    border-color: $disabled-border;
    color: $disabled-color;
  }
}

@mixin button-link(
  $color,
  $active-color
) {
  background-color: transparent;
  border-color: transparent;
  color: $color;

  &:hover,
  &:active {
    color: $active-color;
  }

  @include m(disabled) {
    &,
    &:active,
    &:hover,
    &:focus,
    &:visited {
      background-color: transparent;
      border-color: transparent;
      color: var(--color-text-disabled);
      cursor: not-allowed;
    }
  }
}

@mixin button-ghost(
  $border,
  $color,
  $hover-border,
  $hover-color,
  $active-border,
  $active-color
) {
  @include m(ghost) {
    background-color: transparent;
    border-color: $border;
    color: $color;
    border-width: 1px;
    border-style: solid;

    &:hover {
      border-color: $hover-border;
      color: $hover-color;
    }

    &:active {
      border-color: $active-border;
      color: $active-color;
    }

    @include m(disabled) {
      &,
      &:active,
      &:hover,
      &:focus,
      &:visited {
        background-color: transparent;
        border-color: var(--button-ghost-disabled-border);
        color: var(--button-ghost-disabled-color);
        cursor: not-allowed;
      }
    }
  }
}

@mixin button-size($height, $padding, $font-size, $icon-size) {
  padding: 0 $padding;
  font-size: $font-size;
  height: $height;
  line-height: 1.5;

  @include b(icon) {
    font-size: $font-size;
  }

  @include m(link) {
    line-height: $height;
  }

  @include m(circle) {
    width: $height;
    min-width: var(--button-height-md);
    padding: 0;
  }

  @include m(icon-only) {
    width: $height;
    min-width: var(--button-height-md);
    padding: 0;

    @include b(icon) {
      font-size: $icon-size;
      line-height: 1;
    }
  }

  * + span {
    margin-left: calc(#{$padding} / 2);
  }
}

@mixin button-base() {
  padding: 0;
  border: none;
  font-weight: normal;
  text-align: center;
  overflow: hidden;
  color: var(--color-text);
  transition: all 0.2s ease-out;
  outline: 0 none;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: none;

  &,
  &:active,
  &:hover,
  &:focus,
  &:visited {
    text-decoration: none;
  }

  @include m(default) {
    border-width: 1px;
    border-style: solid;
  }

  /* disabled button */
  @include m(disabled) {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }

  /* block button */
  @include m(block) {
    display: block;
    width: 100%;
  }

  /* loading button */
  @include m(loading) {
    line-height: 1.15;
    cursor: default;
  }
}

// 形状
@mixin button-shape($border-radius: 0) {
  border-radius: $border-radius;
}