/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 1. Accounts for the border
 */
.ouiBadge {
  font-size: $ouiFontSizeXS;
  font-weight: $ouiFontWeightMedium;
  line-height: $ouiSize + 2px; /* 1 */
  padding: 0 $ouiSizeS;
  display: inline-block;
  text-decoration: none;
  border-radius: $ouiBorderRadius / 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;

  &.ouiBadge-isDisabled {
    // sass-lint:disable-block no-important
    // Using !important to override inline styles
    color: makeHighContrastColor($ouiButtonColorDisabled, $ouiButtonColorDisabled, 2) !important;
    background-color: $ouiButtonColorDisabled !important;
  }

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

  + .ouiBadge {
    margin-left: $ouiSizeXS;
  }

  .ouiBadge__content {
    min-height: $ouiSize + ($ouiBorderWidthThin * 2); // Ensure proper height in case of just displaying an icon
    display: flex;
    align-items: center;
    overflow: hidden;
  }

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

    &:disabled {
      cursor: not-allowed;
    }

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

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

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

    &:disabled {
      cursor: not-allowed;
    }

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

  .ouiBadge__text {
    @include ouiTextTruncate;
    flex: 1 1 auto;
    cursor: default;
  }

  .ouiBadge__icon {
    flex: 0 0 auto;

    &:not(:only-child) {
      margin-left: $ouiSizeXS;
    }
  }

  &.ouiBadge--iconLeft {
    .ouiBadge__content {
      flex-direction: row-reverse;
    }

    .ouiBadge__iconButton,
    .ouiBadge__icon:not(:only-child) {
      margin-right: $ouiSizeXS;
      margin-left: 0;
    }
  }
}

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

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

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

  .ouiBadge__text {
    cursor: inherit;
  }
}

// Hollow has a border and is mostly used for autocompleters.
.ouiBadge--hollow {
  background-color: $ouiColorEmptyShade;
  border-color: lightOrDarkTheme($ouiBorderColor, tint($ouiBorderColor, 15%));
  color: $ouiTextColor;
}