/**
 * 1. We don't want any of the animations that come inherited from the mixin.
 *    These should act like normal links instead.
 * 2. Change the easing, quickness to not bounce so lighter backgrounds don't flash
 */
.euiButtonEmpty {
  @include euiButton;

  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  // sass-lint:disable-block no-important
  transform: none !important; /* 1 */
  animation: none !important; /* 1 */
  transition-timing-function: ease-in; /* 2 */
  transition-duration: $euiAnimSpeedFast; /* 2 */

  .euiButtonEmpty__content {
    padding: 0 $euiSizeS;
  }

  .euiButtonEmpty__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &.euiButtonEmpty--small {
    height: $euiButtonHeightSmall;
  }

  &.euiButtonEmpty--xSmall {
    height: $euiSizeL;
    font-size: $euiFontSizeS;
  }

  &:disabled {
    @include euiButtonContentDisabled;

    color: $euiButtonColorDisabledText;

    &:focus {
      background-color: transparent;
    }

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


.euiButtonEmpty--flushLeft,
.euiButtonEmpty--flushRight,
.euiButtonEmpty--flushBoth {
  .euiButtonEmpty__content {
    padding-left: 0;
    padding-right: 0;
  }
}

.euiButtonEmpty--flushLeft {
  margin-right: $euiSizeS;
}

.euiButtonEmpty--flushRight {
  margin-left: $euiSizeS;
}

// Modifier naming and colors.
$euiButtonEmptyTypes: (
  primary: $euiColorPrimaryText,
  danger: $euiColorDangerText,
  disabled: $euiButtonColorDisabledText,
  ghost: $euiColorGhost,
  text: $euiTextColor,
  success: $euiColorSecondaryText,
  warning: $euiColorWarningText,
);

// Create button modifiers based upon the map.
@each $name, $color in $euiButtonEmptyTypes {
  .euiButtonEmpty--#{$name} {
    @if ($name == 'ghost') {
      // Ghost is unique and ALWAYS sits against a dark background.
      color: $color;
    } @else if ($name == 'text') {
      // The default color is lighter than the normal text color, make the it the text color
      color: $euiTextColor;
    } @else {
      // Other colors need to check their contrast against the page background color.
      color: makeHighContrastColor($color, $euiColorEmptyShade);
    }

    &:focus {
      background-color: transparentize($color, .9);
    }

    &:hover {
      @if ($name == 'disabled') {
        cursor: not-allowed;
      }
    }
  }
}