@mixin euiButton {
  @include euiButtonBase;
  @include euiFont;
  @include euiFontSize;
  @include euiButtonFocus;

  font-weight: $euiFontWeightMedium;
  text-decoration: none;
  transition: background-color $euiAnimSpeedNormal ease-in-out, border-color $euiAnimSpeedNormal ease-in-out;
  outline-offset: -1px;

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

// Creates the Amsterdam style of button with a transparent background
@mixin euiButtonDefaultStyle($color, $transparency: $euiButtonDefaultTransparency) {
  $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, $color, $percentConversion);
  // Then we can calculate the darkest text color needed
  color: makeHighContrastColor($color, $backgroundColorSimulated);
  // But still use transparency
  background-color: transparentize($color, $transparency);

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