/* ==============================================================================
   BADGES
   ==============================================================================
   Selected-item badges (.ms__badges container + individual .ms__badge), the
   counter / "+X more" variants, and the data-action badge cursor.
   Count-display mode (a single counter badge instead of one-per-item) lives
   in count-display.css.
*/

/* ==============================================================================
   BADGES CONTAINER
   ============================================================================== */

.ms__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-badges-gap);
  padding: 0;
}

.ms__badges:empty {
  display: none;
}

/* Position variants */
.ms__badges--bottom {
  margin-top: var(--ms-badges-margin-bottom);
}

.ms__badges--top {
  margin-bottom: var(--ms-badges-margin-top);
  order: var(--ms-order-first); /* Place before multiselect in flex container */
}

.ms__badges--left {
  order: var(--ms-order-first); /* Place before multiselect */
  margin-right: var(--ms-badges-margin-left);
  justify-content: flex-end; /* Badges at right edge of container, close to input */
}

.ms__badges--right {
  margin-left: var(--ms-badges-margin-right);
  justify-content: flex-start; /* Badges at left edge of container, close to input */
}

/* ==============================================================================
   INDIVIDUAL BADGE
   ============================================================================== */

/* Individual badge (styled like Pure Admin composite badge) */
.ms__badge {
  display: inline-flex;
  align-items: center;
  height: var(--ms-badge-height); /* Match composite badge height */
  font-size: var(--ms-badge-font-size);
  font-weight: var(--ms-badge-font-weight);
  line-height: var(--ms-line-height-none);
  border-radius: var(--ms-badge-border-radius);
  overflow: hidden;
  max-width: 100%;
}

/* Consumer-owned badge (renderBadgeCallback): the wrapper only carries `data-value`
   for removal/reconciliation — drop the pill constraints (fixed height, overflow clip,
   inline-flex, max-width, pill radius) so the returned markup (e.g. a card) lays out
   freely. The consumer styles everything inside via customStylesCallback. */
.ms__badge--custom {
  display: block;
  height: auto;
  max-width: none;
  overflow: visible;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Badge text (like composite badge label) */
.ms__badge-text {
  display: flex;
  align-items: center;
  box-sizing: border-box; /* Include border in height to prevent clipping */
  height: 100%;
  padding: var(--ms-badge-text-padding);
  background: var(--ms-badge-text-bg);
  color: var(--ms-badge-text-color);
  border: var(--ms-badge-text-border);
  border-inline-end: none; /* No double border at the seam with the button (flips in RTL) */
  /* Rounded on the leading (outer) side, flat where it meets the remove button. */
  border-start-start-radius: var(--ms-badge-border-radius);
  border-end-start-radius: var(--ms-badge-border-radius);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--ms-transition-normal) ease,
              color var(--ms-transition-normal) ease;
}

/* Badge hover state */
.ms__badge:hover .ms__badge-text {
  background: var(--ms-badge-text-bg-hover, var(--ms-badge-text-bg));
  color: var(--ms-badge-text-color-hover, var(--ms-badge-text-color));
}

/* Badge remove button (like composite badge button) */
.ms__badge-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* Include border in height to prevent clipping */
  padding: 0; /* Zero the UA <button> padding — this is a fixed-size flex box that centers its
                 icon (like .ms__toggle / .ms__input-clear / .ms__count-clear). Without this the
                 UA inline padding shrinks the content box below the icon width and clips/off-centers it. */
  font-family: inherit; /* Form elements don't inherit font by default */
  width: var(--ms-badge-remove-width);
  height: 100%;
  flex-shrink: 0;
  background: var(--ms-badge-remove-bg);
  color: var(--ms-badge-remove-color);
  border: var(--ms-badge-remove-border);
  border-inline-start: none; /* No double border at the seam with the text (flips in RTL) */
  /* Rounded on the trailing (outer) side, flat where it meets the text. */
  border-start-end-radius: var(--ms-badge-border-radius);
  border-end-end-radius: var(--ms-badge-border-radius);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  cursor: pointer;
  transition: background-color var(--ms-transition-normal) ease;
  font-size: var(--ms-badge-remove-font-size);
}

.ms__badge-remove:hover {
  background: var(--ms-badge-remove-bg-hover);
}

.ms__badge-remove:focus { outline: none; }
.ms__badge-remove:focus-visible {
  outline: none;
  box-shadow: var(--ms-badge-remove-box-shadow-focus);
}

.ms__badge-remove::before {
  content: "";
  display: block;
  width: var(--ms-badge-remove-icon-size);
  height: var(--ms-badge-remove-icon-size);
  background-color: currentColor;
  -webkit-mask: var(--ms-icon-remove) center / contain no-repeat;
          mask: var(--ms-icon-remove) center / contain no-repeat;
}

/* ==============================================================================
   COUNTER BADGE VARIANT (for "+X more", "3 selected", compact mode)
   ==============================================================================
   Gray/neutral styling to distinguish from regular accent-colored badges
*/
.ms__badge--counter {
  cursor: pointer;
}

.ms__badge--counter .ms__badge-text {
  background: var(--ms-badge-counter-text-bg);
  color: var(--ms-badge-counter-text-color);
  border: var(--ms-badge-counter-border);
  border-inline-end: none;
}

.ms__badge--counter .ms__badge-remove {
  background: var(--ms-badge-counter-remove-bg);
  color: var(--ms-badge-counter-remove-color);
  border: var(--ms-badge-counter-border);
  border-inline-start: none;
}

.ms__badge--counter .ms__badge-remove:hover {
  background: var(--ms-badge-counter-remove-bg-hover);
  color: var(--ms-badge-counter-remove-color-hover, var(--ms-badge-counter-remove-color));
}

/* The counter/"+X more" badge is ALSO a .ms__badge, so the generic
   `.ms__badge:hover .ms__badge-text` rule (which paints text in the ACCENT colour)
   would fire on it and turn the neutral "+X more" label accent-coloured. This block
   keeps it neutral: same specificity as the generic rule (three classes), so source
   order decides — it must (and does) live after it. */
.ms__badge--counter:hover .ms__badge-text {
  background: var(--ms-badge-counter-text-bg-hover, var(--ms-badge-counter-text-bg));
  color: var(--ms-badge-counter-text-color-hover, var(--ms-badge-counter-text-color));
}

/* ==============================================================================
   "+X MORE" BADGE VARIANT
   ============================================================================== */

/* "+X more" badge variant (partial mode) */
/* Now uses .ms__badge--counter for styling, this just adds cursor */
.ms__badge--more {
  cursor: pointer;
}

/* Any badge whose container itself opens the selected-items popover (compact mode, count mode,
   "+X more" partial badge) should show a pointer cursor. */
.ms__badge[data-action="show-selected"] {
  cursor: pointer;
}