@mixin button-base {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: none;
  text-align: center;
  outline: none;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: none;

  @include e(content) {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  @include m(disabled) {
    cursor: not-allowed;
    opacity: var(--za-opacity-disabled);
    pointer-events: none;
  }

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

@mixin button-theme(
  $background,
  $border-color,
  $text-color,
  $loading-color,
  $active-background,
  $active-border-color,
  $active-text-color,
  $active-loading-color,
  $shadow
) {
  background-color: $background;
  border-color: $border-color;
  color: $text-color;

  @include m(shadow) {
    box-shadow: $shadow;
  }

  @include b(loading) {
    @include m(circular) {
      circle {
        stroke: $loading-color;
      }
    }
  }

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

    @include b(loading) {
      @include m(circular) {
        circle {
          stroke: $active-loading-color;
        }
      }
    }
  }
}

@mixin button-size {
  padding: 0 var(--padding-horizontal);
  font-size: var(--font-size);
  height: var(--height);
  line-height: 1.4;

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

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

  @include m(loading) {
    @include b(loading) {
      width: var(--font-size);
      height: var(--font-size);
    }
  }

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

@mixin button-shape {
  border-style: solid;
  border-width: var(--border-width);
  border-radius: var(--border-radius);
}