// 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-color $euiAnimSpeedNormal ease-in-out;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
    }

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

    &:active:not(:disabled) {
      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;
  @include euiButtonFocus;

  font-weight: $euiButtonFontWeight;
  text-decoration: none;
  outline-offset: -1px;

  &:hover:not(:disabled),
  &: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;

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

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

/*
 * Creates the Amsterdam style of button with a transparent background
 */
@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) {
  $backgroundColor: $color;

  @if (map-has-key($euiButtonTypes, $color)) {
    $backgroundColor: map-get($euiButtonTypes, $color);
  }

  $percentConversion: $transparency * 100%;
  // This variable simulates the possibly darkest background the button could be on
  // Simulates the 20% opaque color on top of the page background color
  $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion);
  // Then we can calculate the darkest text color needed
  color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated);
  // But still use transparency
  background-color: transparentize($backgroundColor, $transparency);

  @if ($includeStates) {
    &:not([class*='isDisabled']) {
      &:hover,
      &:focus {
        // Duplicated from inert state simply to override default theme
        background-color: transparentize($backgroundColor, $transparency);
      }
    }
  }
}

/*
 * Creates the Amsterdam style of fill button
 */
@mixin euiButtonFillStyle($color: 'primary') {
  $backgroundColor: $color;

  @if (map-has-key($euiButtonTypes, $color)) {
    $backgroundColor: map-get($euiButtonTypes, $color);
  }

  background-color: $backgroundColor;
  color: chooseLightOrDarkText($backgroundColor);
}

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