/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

// Provides a solid reset and base for handling sizing layout
// Does not include any visual styles
@mixin ouiButtonBase {
  display: inline-block;
  appearance: none;
  cursor: pointer;
  height: $ouiButtonHeight;
  line-height: $ouiButtonHeight; // 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 ouiButtonFocus {
  @include ouiCanAnimate {
    transition: transform $ouiAnimSpeedNormal ease-in-out, background $ouiAnimSpeedNormal ease-in-out;

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

    &:focus {
      animation: ouiButtonActive $ouiAnimSpeedNormal $ouiAnimSlightBounce;
    }

    &: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 ouiButton {
  @include ouiButtonBase;
  @include ouiFont;
  @include ouiFontSize;

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

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

  &: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 ouiButtonContent($isReverse: false) {
  height: 100%;
  width: 100%;
  vertical-align: middle;

  .ouiButtonContent__icon,
  .ouiButtonContent__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: $ouiSizeS; // 1, 2
    }
  } @else {
    display: flex;
    justify-content: center;
    align-items: center;

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

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

  .ouiButtonContent__icon {
    fill: currentColor;
  }

  .ouiButtonContent__spinner {
    border-color: ouiLoadingSpinnerBorderColors(currentColor);
  }
}

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


/* OUI -> EUI Aliases */
@mixin euiButtonBase { @include ouiButtonBase; }
@mixin euiButtonFocus { @include ouiButtonFocus; }
@mixin euiButton { @include ouiButton; }
@mixin euiButtonContent($isReverse: false) {
  @include ouiButtonContent($isReverse);

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

  .euiButtonContent__icon {
    fill: currentColor;
  }

  .euiButtonContent__spinner {
    border-color: ouiLoadingSpinnerBorderColors(currentColor);
  }
}
/* End of Aliases */