/* ============================================================================
 * COMPONENT — Chip
 * ----------------------------------------------------------------------------
 * A small removable pill: skills on the profile editor, filters on a listing
 * later. Shared rather than page-specific — the editor and the public profile
 * show the same skills and must show them identically.
 *
 * Different from a badge: a badge states a status and is read-only; a chip is a
 * thing the user chose and can usually remove.
 * ========================================================================== */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  /* Holds text a USER typed, which may be Urdu or Arabic on a page laid out
     left-to-right. Isolating it keeps the layout from flipping while letting
     the script itself read correctly — see .ugc in base.css. */
  unicode-bidi: isolate;

  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  /* Logical, and asymmetric: more room on the leading side where the label
     starts, less on the trailing side where a remove button may sit. */
  padding-block: var(--sp-1);
  padding-inline: var(--sp-3) var(--sp-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

/* Tightened when there is a remove button, so the × does not float away from
   the label it belongs to. */
.chip:has(.chip__remove) { padding-inline-end: var(--sp-1); }

.chip__level {
  padding-inline-start: var(--sp-2);
  border-inline-start: 1px solid var(--brand-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--ink-muted);
}

.chip__remove {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
}

.chip__remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

.chip__remove .icon {
  inline-size: 12px;
  block-size: 12px;
}

/* The remove control is a one-button form, which is block-level by default and
   would push the × onto its own line. */
.chip form { display: inline-flex; }