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

/**
 * @summary Pill base — paint surface for the theme layer.
 *
 * The theme layer reads only canonical `--slds-c-pill-*` hooks; every
 * concrete value is supplied by `themes/<theme>.css`. Variant /
 * state-specific paint reassigns the same canonical hooks under the
 * variant's modifier compound (`.slds-pill.slds-pill_bare`,
 * `.slds-pill.slds-has-error`, etc.) per RFC 1157 "Variant Modifiers
 * Reassign Base Hooks". No per-state or per-variant hook names are
 * minted.
 */

.slds-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  position: relative;
  height: 1.5rem;
  padding-block-start: var(--slds-c-pill-spacing-block-start, var(--slds-c-pill-spacing-block));
  padding-block-end: var(--slds-c-pill-spacing-block-end, var(--slds-c-pill-spacing-block));
  /* The pill is `inline-flex` with the remove button as a flex item; the
     button has its own internal padding so the pill root only paints
     its leading inline padding. Trailing falls to browser default 0,
     keeping the remove icon visually flush with the pill edge. The
     `_link` variant absolute-positions its remove slot and steers
     trailing space through `--slds-c-pill-action-spacing-inline-end`
     on the action element instead. */
  padding-inline-start: var(--slds-c-pill-spacing-inline-start, var(--slds-c-pill-spacing-inline));
  border-style: solid;
  border-width: var(--slds-c-pill-sizing-border);
  border-color: var(--slds-c-pill-color-border, transparent);
  border-radius: var(--slds-c-pill-radius-border);
  background-color: var(--slds-c-pill-color-background);
  font-size: var(--slds-c-pill-font-size);
  line-height: var(--slds-c-pill-font-line-height);

  + .slds-pill {
    margin-inline-start: var(--slds-c-pill-margin-inline-start-adjacent);
  }

  a {
    text-decoration: none;
  }
}

.slds-pill .slds-pill__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slds-pill .slds-pill__label:focus {
  outline: 0;
  border-radius: var(--slds-c-pill-label-radius-border);
  box-shadow: var(--slds-c-pill-label-shadow-focus);
}

/* Hover paints the per-state background hook directly (no hook write
   inside a pseudo-state). */
.slds-pill:hover {
  background-color: var(--slds-c-pill-color-background-hover);
}

/* Focus-visible state when the action element is focused: the pill
   takes a focus-tinted border + shadow. */
.slds-pill:has(.slds-pill__action:focus-visible) {
  border-color: var(--slds-c-pill-color-border-focus, transparent);
  box-shadow: var(--slds-c-pill-shadow-focus);
  outline: 0;
}

/* Error state explicitly recolors the label so link-pill labels (inside
   an <a>) don't keep the link color, and bumps the weight per the
   legacy paint surface. Plain pills don't need an explicit color
   anywhere; they inherit from the surrounding context. */
.slds-pill.slds-has-error .slds-pill__label {
  color: var(--slds-c-pill-color-foreground);
  font-weight: var(--slds-c-pill-font-weight);
}

/* Icon / avatar slot to the left of the label */
.slds-pill .slds-pill__icon,
.slds-pill .slds-pill__icon_container {
  width: var(--slds-c-pill-icon-size);
  height: var(--slds-c-pill-icon-size);
  margin-inline-end: var(--slds-c-pill-icon-spacing-inline);
}

.slds-pill .slds-pill__icon .slds-icon,
.slds-pill .slds-pill__icon .slds-avatar,
.slds-pill .slds-pill__icon_container .slds-icon,
.slds-pill .slds-pill__icon_container .slds-avatar {
  width: var(--slds-c-pill-icon-size);
  height: var(--slds-c-pill-icon-size);
  display: block;
  font-size: var(--slds-c-pill-icon-font-size);
}

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

/* Remove (dismiss) icon slot to the right of the label */
.slds-pill .slds-pill__remove {
  width: var(--slds-c-pill-remove-size);
  height: var(--slds-c-pill-remove-size);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: content-box;
  padding: var(--slds-c-pill-remove-spacing);
  color: var(--slds-c-pill-remove-color-foreground);
}

.slds-pill .slds-pill__remove svg {
  width: var(--slds-c-pill-remove-icon-size);
  height: var(--slds-c-pill-remove-icon-size);
}

/* The remove button is a `<button class="slds-button_icon">` —
   reassign its color hook so the X glyph inherits the pill's remove
   color. */
.slds-pill .slds-pill__remove .slds-button_icon {
  color: var(--slds-c-pill-remove-color-foreground);
  font-size: var(--slds-c-pill-remove-icon-font-size);
  line-height: var(--slds-c-pill-remove-icon-line-height);
}

/* Action wrapper (link-style pills). Padding routes through an action
   axis hook (`--slds-c-pill-action-spacing-inline`) so the `_link`
   variant can override trailing space for its absolutely-positioned
   remove icon without locking customer overrides to a single tier. */
.slds-pill .slds-pill__action {
  padding-block-start: var(--slds-c-pill-action-spacing-block-start, var(--slds-c-pill-action-spacing-block));
  padding-block-end: var(--slds-c-pill-action-spacing-block-end, var(--slds-c-pill-action-spacing-block));
  padding-inline-start: var(
    --slds-c-pill-action-spacing-inline-start,
    var(--slds-c-pill-action-spacing-inline)
  );
  padding-inline-end: var(--slds-c-pill-action-spacing-inline-end, var(--slds-c-pill-action-spacing-inline));
  border-style: solid;
  border-width: var(--slds-c-pill-sizing-border);
  border-color: var(--slds-c-pill-color-border, transparent);
  border-radius: var(--slds-c-pill-radius-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  display: flex;
}

.slds-pill .slds-pill__action:focus-visible {
  outline: 0;
  text-decoration: none;
}

.slds-pill .slds-pill__action .slds-pill__label {
  align-self: center;
}

/* When an icon precedes the action (link variant), shift the action's
   inline-start padding so the label clears the absolutely-positioned
   icon. */
.slds-pill .slds-pill__icon ~ .slds-pill__action,
.slds-pill .slds-pill__icon_container ~ .slds-pill__action {
  padding-inline-start: var(--slds-c-pill-action-spacing-inline-start-with-icon);
}

/* Link modifier: positions the icon and remove slots absolutely */
.slds-pill.slds-pill_link {
  border: 0;
  padding: 0;
  align-items: stretch;
}

.slds-pill.slds-pill_link .slds-pill__icon_container {
  display: inline-block;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--slds-c-pill-spacing-inline-start, var(--slds-c-pill-spacing-inline));
  transform: translateY(-50%);
}

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

/* Pill container (Rule 5: root-anchored modifier compound). The
   container's hook surface is a separate prefix family
   (`--slds-c-pill-container-*`) since it's a different element. */
.slds-pill.slds-pill_container {
  display: flex;
  min-height: calc(1.625rem + 2px);
  padding-block-start: var(
    --slds-c-pill-container-spacing-block-start,
    var(--slds-c-pill-container-spacing-block)
  );
  padding-block-end: var(
    --slds-c-pill-container-spacing-block-end,
    var(--slds-c-pill-container-spacing-block)
  );
  padding-inline-start: var(
    --slds-c-pill-container-spacing-inline-start,
    var(--slds-c-pill-container-spacing-inline)
  );
  padding-inline-end: var(
    --slds-c-pill-container-spacing-inline-end,
    var(--slds-c-pill-container-spacing-inline)
  );
  border-style: solid;
  border-width: var(--slds-c-pill-container-sizing-border);
  border-color: var(--slds-c-pill-container-color-border, transparent);
  border-radius: var(--slds-c-pill-container-radius-border);
  background-color: var(--slds-c-pill-container-color-background);
}

/* Reset listbox margin when the listbox sits inside a pill container.
   The shorthand axis property is the right tool here since this is a
   foreign-component reset (zeroing both directions at once); it isn't
   exposing a customer override surface. */
.slds-pill.slds-pill_container .slds-listbox_inline {
  margin-inline: 0;
}