/* The variants' chips and their editor (components/chips.js; FR-025; A2.html .vchips .vchip .vsug .vadd .supvar .fline);
   every value is a token. The owner's spacing rule: the chips a gap apart, the field and the suggestions a gap from the
   chips and from each other, the supplier's text in its box a gap from what is under it, no clutter. */
[data-part="variants-editor"] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.vtype {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.vline {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap);
}

.vline > select,
.vline > input {
  flex: 1 1 auto;
  min-width: 0;
}

.vline > .mbtn {
  flex: none;
  width: auto;
  padding-inline: var(--spacing-md);
  white-space: nowrap;
}

.vtl {
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.vchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.vchip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: var(--spacing-row) var(--spacing-xs);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--app-raise);
  color: var(--app-ink);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* the × is a 32 px target inside the 36 px chip; its drawn cross is the shared icon */
.vchip button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--app-ink-soft);
  cursor: pointer;
}

.vchip button svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

/* the field «أضف قيمة»: a dashed pill that sits in the chips' line */
.vadd {
  box-sizing: border-box;
  flex: 1 1 110px;
  min-width: 110px;
  min-height: 36px;
  padding-inline: var(--spacing-row);
  border: 1px dashed var(--app-line-strong);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--app-ink);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

[data-part="other-type"] {
  box-sizing: border-box;
  min-height: 44px;
  padding-inline: var(--spacing-row);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-thumb);
  background-color: var(--app-surface);
  color: var(--app-ink);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

[data-part="other-type"][hidden] {
  display: none;
}

.vsug {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.vsug button {
  min-height: 32px;
  padding-inline: var(--spacing-row);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-pill);
  background-color: var(--app-surface);
  color: var(--app-ink-soft);
  font-family: inherit;
  font-size: var(--font-size-meta);
  cursor: pointer;
}

/* the supplier's own text, as read: a quiet box with the gap of the section round it */
.supvar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: baseline;
  padding: var(--spacing-sm) var(--spacing-row);
  border-radius: var(--radius-thumb);
  background-color: var(--app-raise);
  font-size: var(--font-size-sm);
}

.supvar .kl {
  color: var(--app-muted);
  font-weight: 700;
}