$euiButtonHeightSmall: $euiSizeXL;
$euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 80%);

@mixin euiButton {

  display: inline-block;
  appearance: none;
  cursor: pointer;
  height: $euiSizeXXL;
  text-decoration: none;
  border: solid 1px transparent;
  text-align: center;
  font-family: $euiFontFamily;
  transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;

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

  &:hover:not(:disabled), &:focus {
    text-decoration: underline;
  }

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

  &:active {
    transform: translateY(1px);
  }
}

/**
 * 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;

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

    > * + * {
      margin-left: 0; /* 1 */
      margin-right: $euiSizeS; /* 1 */
    }
  } @else {
    display: flex;
    justify-content: center;
    align-items: center;

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

@keyframes euiButtonActive {
  50% {
    transform: translateY(1px);
  }
}

@import 'button';
@import 'button_empty/index';
@import 'button_icon/index';
