@mixin suiButtonHoverSelectors() {
  a:hover &,
  button:hover &,
  &:hover,
  a:focus &,
  button:focus &,
  &:focus,
  a:active &,
  button:active &,
  &:active {
    &:not(.as--loading) {
      @content;
    }
  }
}

@mixin suiButtonFocusSelectors() {
  a:focus &,
  button:focus &,
  &:focus {
    &:not(.as--loading) {
      @content;
    }
  }
}

@mixin suiButtonColor(
  $background: $sui-color-brand-denim-300,
  $color: contrast($background),
  $border-color: darken($background, 5%),
  $color-hover: $color,
  $background-hover: darken($background, 6%),
  $border-color-hover: darken($border-color, 20%),
  $color-contextual: $background,
  $color-contextual-hover: darken($color-contextual, 15%),
  $color-focus-effect: $background
) {
  color: $color;
  background-color: $background;
  border-color: $border-color;

  @include suiButtonHoverSelectors() {
    color: $color-hover;
    background-color: $background-hover;
    border-color: $border-color-hover;
  }

  @include suiButtonFocusSelectors {
    @include suiFocusEffect($color-focus-effect);
  }

  html body &.as--contextual {
    color: $color-contextual;

    @include suiButtonHoverSelectors() {
      color: $color-contextual-hover;
    }

    @include suiButtonFocusSelectors() {
      @include suiFocusEffect();
    }

    &.as--loading::after {
      color: $color-contextual;
    }
  }

  &.as--loading {
    @include suiButtonLoading();

    &::after {
      color: $color;
    }
  }
}

@mixin suiButtonSize($padding-vertical, $padding-horizontal, $font-size: $sui-font-size-md) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;

  html body &.as--square {
    height: $padding-vertical * 2 + $font-size * $sui-line-height + rem(2);
    width: $padding-vertical * 2 + $font-size * $sui-line-height + rem(2);
  }
}

@mixin suiButtonBase() {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  font-weight: normal;
  border: $sui-size-border solid transparent;
  border-radius: $sui-border-radius-md;
  white-space: normal;
  transition: .2s;
  user-select: none;
  min-width: 1em;
  outline: none;
  text-decoration: none;

  &:focus,
  &:active,
  &:active:focus {
    outline: 0;
    background-image: none;
  }

  @include suiButtonSize($sui-space-xs, $sui-space-md, $sui-font-size-md);
  @include suiButtonColor($color: $sui-color-text, $color-contextual: $sui-color-text-light);
}

@mixin suiButtonLoading () {
  pointer-events: none;
  position: relative;
  cursor: progress;
  color: transparent !important;

  @include suiLoader();
}

@mixin suiButtonDisabled() {
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  color: rgba(0, 0, 0, .2) !important;
  transform: translate3d(0, 0, 0); // Fix: Rendering disabled buttons on Chrome for Android (bug)

  // Loader
  &::after {
    color: rgba(0, 0, 0, .2) !important;
  }

  &:not(.as--contextual):not(.as--link):not(.as--link-alt) {
    background:
      $sui-color-brand-denim-200 repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0) rem(2),
        rgba(0, 0, 0, 0.02) rem(2),
        rgba(0, 0, 0, 0.02) rem(4)
      ) !important;
    border-color: rgba(0, 0, 0, .1) !important;
  }

  &.as--contextual,
  &.as--link,
  &.as--link-alt {
    text-decoration: line-through !important;
  }
}

@mixin suiButtonDisabledSelectors() {
  [disabled] &,
  .as--disabled &,
  &.as--disabled,
  &[disabled] {
    @include suiButtonDisabled();

    @content;
  }
}