// Lightning Design System 2.24.3
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Create badge component
 *
 * @name base
 * @selector .slds-badge
 * @restrict span
 * @support dev-ready
 * @variant
 */
.slds-badge {
  display: inline-flex;
  align-items: center;
  padding: $spacing-xx-small $spacing-x-small;
  color: var(--slds-c-badge-text-color, var(--sds-c-badge-text-color, var(--slds-g-color-neutral-base-10, #{$color-text-default})));
  font-size: var(--slds-c-badge-font-size, var(--sds-c-badge-font-size, $font-size-2));
  font-weight: $font-weight-bold;
  line-height: var(--slds-c-badge-line-height, var(--sds-c-badge-line-height, normal));
  white-space: nowrap;
  border-width: var(--slds-c-badge-sizing-border, var(--sds-c-badge-sizing-border, $border-width-thin));
  border-style: solid;
  border-color: var(--slds-c-badge-color-border, var(--sds-c-badge-color-border, transparent));
  border-radius: var(--slds-c-badge-radius-border, var(--sds-c-badge-radius-border, $border-radius-pill));
  background-color: var(--slds-c-badge-color-background, var(--sds-c-badge-color-background, var(--slds-g-color-neutral-base-95, #{$color-background-dark})));

  + .slds-badge {
    margin-left: $spacing-x-small;
  }

  &:empty {
    padding: 0;
  }
}

/**
 * @summary Change badge color to a dark with light text
 * @name inverse
 * @selector .slds-badge_inverse
 * @restrict .slds-badge
 * @modifier
 * @group color
 */
.slds-badge_inverse {
  /*! @css-var-fallback background-color */
  --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--sds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, #{$badge-color-background-inverse})));

  /*! @css-var-fallback color */
  --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--sds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, #{$color-text-inverse})));
}

/**
 * @summary Change badge color to white with normal text
 * @name lightest
 * @selector .slds-badge_lightest
 * @restrict .slds-badge
 * @modifier
 * @group color
 */
.slds-badge_lightest {
  /*! @css-var-fallback background-color */
  --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--sds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, #{$badge-color-background-lightest})));

  /*! @css-var-fallback border-color */
  --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--sds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, #{$color-border})));
}

/**
 * @summary Adds an icon to badge
 * @name icon-container
 * @selector .slds-badge__icon
 * @restrict .slds-badge span
 * @modifier
 */
.slds-badge__icon {
  display: inline-flex;
  align-items: center;
  color: var(--slds-c-badge-icon-color-foreground, var(--sds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, #{$color-text-icon-default})));
  line-height: 1;
  vertical-align: middle;

  /**
   * @summary Change badge icon fill color to inverse
   * @name icon-inverse
   * @selector .slds-badge__icon_inverse
   * @restrict .slds-badge__icon
   * @modifier
   * @group color
   */
  &.slds-badge__icon_inverse {
    /*! @css-var-fallback color */
    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
  }
}

/**
 * @summary Adds an icon to the left of the badge text
 * @name icon-left
 * @selector .slds-badge__icon_left
 * @restrict .slds-badge__icon
 * @modifier
 * @group spacing
 */
.slds-badge__icon_left {
  margin-right: $spacing-xx-small;
}

/**
 * @summary Adds an icon to the right of the badge text
 * @name icon-right
 * @selector .slds-badge__icon_right
 * @restrict .slds-badge__icon
 * @modifier
 * @group spacing
 */
.slds-badge__icon_right {
  margin-left: $spacing-xx-small;
}