/**
 * @file
 * Normalizes single-value webform Tagify selects to look like multi-value ones.
 *
 * When Tagify operates in mode:'select' it adds the class tagify--select to
 * the <tags> wrapper and its own CSS applies rules that make the element look
 * like a combobox (chevron arrow, no pill background, full-width tag). These
 * overrides restore the tag-pill appearance used by multi-value fields.
 */

/* Remove the ">" chevron indicator */
.webform-entity-select.tagify.tagify--select::after {
  display: none;
}

/* Restore individual tag pill layout */
.webform-entity-select.tagify.tagify--select .tagify__tag {
  flex: initial;
  max-width: var(--tag--max-width, 100%);
  margin-inline-end: 0;
  margin-block: 5px;
  padding-block: initial;
  cursor: default;
}

/* Restore the pill background (tagify--select sets display:none on ::before) */
.webform-entity-select.tagify.tagify--select .tagify__tag > div::before {
  display: initial;
}

/* Show the text input after a tag has been selected */
.webform-entity-select.tagify.tagify--select .tagify__tag + .tagify__input {
  display: inline-block;
}

/* Keep the remove button visible when the dropdown is open */
.webform-entity-select.tagify.tagify--select[aria-expanded="true"]
  .tagify__tag__removeBtn {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}