// Provides a solid reset and base for handling sizing layout
// Does not include any visual styles
@mixin euiButtonBase {
  display: inline-block;
  appearance: none;
  cursor: pointer;
  height: $euiButtonHeight;
  line-height: $euiButtonHeight; // prevents descenders from getting cut off
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: middle;
}

// Adds the focus (and hover) animation for translating up 1px
@mixin euiButtonFocus {
  @include euiCanAnimate {
    transition: transform $euiAnimSpeedNormal ease-in-out, background $euiAnimSpeedNormal ease-in-out;

    &:hover:not([class*='isDisabled']) {
      transform: translateY(-1px);
    }

    &:focus {
      animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
    }

    &:active:not([class*='isDisabled']) {
      transform: translateY(1px);
    }
  }
}

// All of the button base styles including the base, focus, font, and initial styles
// Does not include individual alterations like color or sizes
@mixin euiButton {
  @include euiButtonBase;
  @include euiFont;
  @include euiFontSize;

  text-decoration: none;
  border: solid 1px transparent;

  // sass-lint:disable mixins-before-declarations
  // focus states should come after all default styles
  @include euiButtonFocus;

  &:hover:not([class*='isDisabled']),
  &:focus {
    text-decoration: underline;
  }
}

// Correctly lays out the contents of a button when using the proper dom elements of:
// <button>
//   <span className="__content">
//     {icon/spinner}
//     {child}
//   </span>
// </button>
// 1. Apply margin to all but last item in the flex.
// 2. Margin gets flipped because of the row-reverse.
@mixin euiButtonContent($isReverse: false) {
  height: 100%;
  width: 100%;
  vertical-align: middle;

  .euiButtonContent__icon,
  .euiButtonContent__spinner {
    flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
  }

  @if ($isReverse) {
    flex-direction: row-reverse;

    > * + * {
      margin-inline-start: 0; // 1, 2
      margin-inline-end: $euiSizeS; // 1, 2
    }
  } @else {
    display: flex;
    justify-content: center;
    align-items: center;

    > * + * {
      margin-inline-start: $euiSizeS; // 1
    }
  }
}

@mixin euiButtonContentDisabled {
  pointer-events: auto;
  cursor: not-allowed;

  .euiButtonContent__icon {
    fill: currentColor;
  }

  .euiButtonContent__spinner {
    border-color: euiLoadingSpinnerBorderColors(currentColor);
  }
}

// Keyframe animation declarations can be found in
// utility/animations.scss