// This file has lots of modifiers and is somewhat nesty by nature
// sass-lint:disable nesting-depth

// Our base button
.euiButton {
  @include euiButton;
  @include euiSlightShadow;

  border-radius: $euiBorderRadius;
  min-width: $euiButtonMinWidth;

  .euiButton__content {
    padding: 0 ($euiSize - $euiSizeXS);
  }

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

  &.euiButton--small {
    height: $euiButtonHeightSmall;
    line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
  }

  &:hover,
  &:active {
    @include euiSlightShadowHover;
  }

  &:not([class*='isDisabled']) {
    &:hover,
    &:focus,
    &:focus-within {
      background-color: transparentize($euiColorPrimary, .9);
    }
  }

  &.euiButton-isDisabled {
    @include euiButtonContentDisabled;
    color: $euiButtonColorDisabledText;
    border-color: $euiButtonColorDisabled;

    &.euiButton--fill {
      // Only increase the contrast of background color to text to 2.0 for disabled
      color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
      background-color: $euiButtonColorDisabled;
      border-color: $euiButtonColorDisabled;

      &:hover,
      &:focus,
      &:focus-within {
        background-color: $euiButtonColorDisabled;
        border-color: $euiButtonColorDisabled;
      }
    }

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

// Create button modifiers based upon the map.
@each $name, $color in $euiButtonTypes {
  .euiButton--#{$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, $euiPageBackgroundColor);
    }

    border-color: $color;

    &.euiButton--fill {
      background-color: $color;
      border-color: $color;

      // The function makes that hexes safe for theming
      $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);

      color: $fillTextColor;

      &:not([class*='isDisabled']) {
        &:hover,
        &:focus,
        &:focus-within {
          background-color: darken($color, 5%);
          border-color: darken($color, 5%);
        }
      }
    }

    &:not([class*='isDisabled']) {
      $shadowColor: $euiShadowColor;
      @if ($name == 'ghost') {
        $shadowColor: $euiColorInk;
      } @else if (lightness($euiTextColor) < 50) {
        // Only if this is the light theme do we use the button variant color to colorize the shadow
        $shadowColor: desaturate($color, 60%);
      }

      @include euiSlightShadow($shadowColor);

      &:hover,
      &:focus,
      &:focus-within {
        @include euiSlightShadowHover($shadowColor);
        background-color: transparentize($color, .9);
      }
    }
  }
}

// Fix ghost/disabled look specifically
.euiButton.euiButton-isDisabled.euiButton--ghost {
  &,
  &:hover,
  &:focus,
  &:focus-within {
    @include euiSlightShadow($euiColorInk);
    color: $euiButtonColorGhostDisabled;
    border-color: $euiButtonColorGhostDisabled;
  }

  &.euiButton--fill {
    background-color: $euiButtonColorGhostDisabled;
    color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
  }
}

.euiButton--fullWidth {
  display: block;
  width: 100%;
}