/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * @summary Initializes pill
 */
.slds-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  line-height: var(--slds-g-font-lineheight-2);
  max-width: 100%;
  font-size: var(--slds-g-font-scale-neg-1);
  padding-block-start: var(--slds-c-pill-spacing-block-start);
  padding-inline-end: var(--slds-c-pill-spacing-inline-end);
  padding-block-end: var(--slds-c-pill-spacing-block-end);
  padding-inline-start: var(--slds-c-pill-spacing-inline-start, var(--slds-g-spacing-2));
  border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1));
  border-style: solid;
  border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
  border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-pill));
  background-color: var(--slds-c-pill-color-background, var(--slds-g-color-surface-container-1));
  box-shadow: var(--slds-c-pill-shadow);
  position: relative;
  height: 1.5rem;

  + .slds-pill {
    margin-inline-start: var(--slds-g-spacing-1);
  }

  &:hover {
    --slds-c-pill-color-background: var(--slds-s-pill-color-background-hover);
  }

  &:has(.slds-pill__action:focus-visible) {
    outline: 0;
    --slds-c-pill-color-border: var(--slds-g-color-border-2);
    --slds-c-pill-shadow: var(--slds-g-shadow-inset-focus-1);
  }

  a {
    text-decoration: none;
  }

  .slds-popover_tooltip {
    width: max-content;
  }
}

/**
  * Modifier that removes border and background from a pill
  */
.slds-pill_bare {
  --slds-c-pill-color-background: transparent;
  --slds-c-pill-sizing-border: 0;
}

/**
  * Container to hold pill(s) with borders
  */
.slds-pill_container {
  display: flex;
  min-height: calc(1.625rem + 2px);
  padding-block-start: var(--slds-c-pill-container-spacing-block-start, var(--slds-g-spacing-1));
  padding-inline-end: var(--slds-c-pill-container-spacing-inline-end, var(--slds-g-spacing-1));
  padding-block-end: var(--slds-c-pill-container-spacing-block-end, var(--slds-g-spacing-1));
  padding-inline-start: var(--slds-c-pill-container-spacing-inline-start, var(--slds-g-spacing-1));
  border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1));
  border-style: solid;
  border-color: var(--slds-c-pill-color-border, var(--slds-s-input-color-border));
  border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-4));
  background-color: var(--slds-c-pill-container-color-background, var(--slds-g-color-surface-1));

  .slds-listbox_inline {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}

/**
  * Line of text inside a pill
  */
.slds-pill__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:focus {
    outline: 0;
    border-radius: var(--slds-g-radius-border-1);
    box-shadow: var(--slds-c-pill-label-shadow-focus, var(--slds-g-shadow-outline-focus-1));
  }
}

/**
  * Initializes pill icon or avatar that sits to the left of the label
  */
.slds-pill__icon,
.slds-pill__icon_container {
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  margin-inline-end: var(--slds-g-spacing-1);

  .slds-icon,
  .slds-avatar {
    width: var(--slds-g-sizing-5);
    height: var(--slds-g-sizing-5);
    display: block;
    font-size: var(--slds-g-font-scale-neg-2);
  }

  ~ .slds-pill__action {
    padding-inline-start: calc(var(--slds-g-spacing-2) + var(--slds-g-sizing-5) + var(--slds-g-sizing-2));
  }

  .slds-icon_container {
    display: inline-flex;
  }
}

/**
  * Initializes remove icon in pill that sits to the right of the label
  */
.slds-pill__remove {
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: content-box;
  padding: var(--slds-g-spacing-1);

  svg {
    width: var(--slds-g-sizing-4);
    height: var(--slds-g-sizing-4);
  }

  .slds-button_icon {
    color: var(--slds-g-color-accent-2);
    line-height: var(--slds-g-font-lineheight-1);
    font-size: var(--slds-g-sizing-3);
  }
}

/**
 * Creates a pill with a hyperlink
 */
.slds-pill_link {
  border: 0;
  padding: 0;
  align-items: stretch;

  .slds-pill__icon_container {
    display: inline-block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--slds-g-spacing-2);
    transform: translateY(-50%);
  }

  .slds-pill__remove {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
  }
}

/**
   * Actionable element inside of pill with hyperlink
   */
.slds-pill__action {
  padding-block-start: var(--slds-c-pill-spacing-block-start, var(--slds-g-spacing-1));
  padding-inline-end: var(--slds-c-pill-spacing-inline-end, var(--slds-g-spacing-5));
  padding-block-end: var(--slds-c-pill-spacing-block-end, var(--slds-g-spacing-1));
  padding-inline-start: var(--slds-c-pill-spacing-inline-start, var(--slds-g-spacing-2));
  border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1));
  border-style: solid;
  border-color: var(--slds-c-pill-color-border, var(--slds-s-input-color-border));
  border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-pill));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  display: flex;

  &:focus-visible {
    outline: 0;
    text-decoration: none;
  }

  & .slds-pill__label {
    align-self: center;
  }
}

/**
  * Pill error styles
  */
.slds-pill.slds-has-error {
  border-color: var(--slds-c-pill-error-color-border, var(--slds-g-color-border-error-1));

  &:active {
    border-color: var(--slds-c-pill-error-color-border-active, var(--slds-g-color-border-error-1));
  }

  .slds-pill__label {
    font-weight: var(--slds-g-font-weight-4);
    color: var(--slds-c-pill-error-text-color, var(--slds-g-color-error-1));
  }

  .slds-button_icon {
    color: var(--slds-g-color-error-1);
  }

  &:hover {
    --slds-c-pill-error-text-color: var(--slds-g-color-error-1);
    --slds-c-pill-color-background: var(--slds-g-color-surface-container-2);

    .slds-pill__icon_container .slds-icon-text-error {
      --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
    }
  }
}