/**
 * 1. Make sure the quantity doesn't get an underline on hover
 */
.euiFacetButton {
  @include euiButtonBase;
  @include euiFont;
  @include euiFontSizeS;

  height: $euiButtonHeightSmall;
  text-align: left;
  text-decoration: none;
  transition: all $euiAnimSpeedFast ease-in;

  &:hover,
  &:focus {
    &:not(:disabled) .euiFacetButton__text {
      text-decoration: underline; /* 1 */
    }
  }

  &:focus {
    background-color: $euiFocusBackgroundColor;
    // use box-shadow as a "faux outline" to apply left/right padding only
    box-shadow: -$euiSizeXS 0 $euiFocusBackgroundColor, $euiSizeXS 0 $euiFocusBackgroundColor;
  }

  &:disabled {
    color: $euiButtonColorDisabledText;
    pointer-events: none;

    .euiFacetButton__content {
      pointer-events: auto;
      cursor: not-allowed;
    }

    .euiFacetButton__icon,
    .euiFacetButton__quantity {
      opacity: .5;
    }

    &:focus {
      background-color: transparent;
    }

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

.euiFacetButton__content {
  @include euiButtonContent;
}

.euiFacetButton__text {
  @include euiTextShift;
  @include euiTextTruncate;
  flex-grow: 1;
  vertical-align: middle;

  .euiFacetButton--isSelected & {
    font-weight: $euiFontWeightBold;
  }
}

.euiFacetButton__icon {
  transition: all $euiAnimSpeedFast ease-in;
}