_badge.scss

/**
 * 1. Accounts for the border
 */
.euiBadge {
  font-size: $euiFontSizeXS;
  font-weight: $euiFontWeightMedium;
  line-height: $euiSize + 2px; /* 1 */
  padding: 0 $euiSizeS;
  display: inline-block;
  text-decoration: none;
  border-radius: $euiBorderRadius / 2;
  border: solid 1px transparent;
  background-color: transparent;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  max-width: 100%;
  // The badge will only ever be as wide as its content
  // So, make the text left aligned to ensure all badges line up the same
  text-align: left;

  &.euiBadge-isDisabled {
    // sass-lint:disable-block no-important
    // Using !important to override inline styles
    background-color: $euiButtonColorDisabled !important;
    color: $euiColorEmptyShade !important;
  }

  &:focus-within {
    @include euiFocusRing('small');
  }

  + .euiBadge {
    margin-left: $euiSizeXS;
  }

  .euiBadge__content {
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .euiBadge__childButton {
    @include euiTextTruncate;
    flex: 1 1 auto; // Must be 1 and 1 for IE to properly truncate
    text-align: inherit;
    font-weight: inherit;
    line-height: inherit;

    &:disabled {
      cursor: not-allowed;
    }

    &:not(:disabled) {
      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }

  .euiBadge__iconButton {
    flex: 0 0 auto;
    font-size: 0; // Makes the button only as large as the icon so it aligns vertically better
    margin-left: $euiSizeXS;

    &:focus {
      background-color: transparentize($euiColorGhost, .2);
      color: $euiColorInk;
      border-radius: 2px;
    }

    &:disabled {
      cursor: not-allowed;
    }

    .euiBadge__icon {
      // Remove margins from icon itself so that focus state doesn't include that space
      margin: 0 !important; // sass-lint:disable-line no-important
    }
  }

  .euiBadge__text {
    @include euiTextTruncate;
    flex: 1 1 auto;
    cursor: default;
  }

  .euiBadge__icon {
    flex: 0 0 auto;
    margin-left: $euiSizeXS;
  }

  &.euiBadge--iconLeft .euiBadge__content {
    flex-direction: row-reverse;

    .euiBadge__iconButton,
    .euiBadge__icon {
      margin-right: $euiSizeXS;
      margin-left: 0;
    }
  }
}

.euiBadge-isClickable {
  &:not(:disabled) {
    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

  &.euiBadge-isDisabled {
    cursor: not-allowed;
  }

  &:focus {
    @include euiFocusRing('small');
  }

  .euiBadge__text {
    cursor: inherit;
  }
}

// Hollow has a border and is mostly used for autocompleters.
.euiBadge--hollow {
  background-color: $euiColorEmptyShade;
  border-color: lightOrDarkTheme($euiBorderColor, tint($euiBorderColor, 15%));
  color: $euiTextColor;
}