:host {
  display: flex;
  flex-flow: row-reverse wrap;
  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);

  /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
}

:host([stacked]) {
  flex-flow: column nowrap;
  align-items: stretch;
  padding: 0;
}

:host([stacked]) ::slotted(*) {
  display: block;
  width: 100%;
}

::slotted([hidden]) {
  display: none !important;
}

/*
 * Non-stacked alignment split: push tertiary cluster to the right, primary/secondary stays left.
 *
 * OQ-A1 resolution: margin-inline-end: auto is used (not margin-inline-start).
 * The host uses flex-flow: row-reverse, so the flex main axis runs right→left
 * (main-start is on the right, main-end is on the left in LTR).
 * Tertiary buttons appear last in DOM but are rendered leftmost by row-reverse.
 * Applying margin-inline-end: auto on the tertiary items creates an auto margin on
 * their inline-end side (right in LTR), which corresponds to the flex main-start
 * direction — this absorbs all available space between the p/s cluster and the
 * tertiary cluster, pushing tertiary visually to the right as intended.
 */

:host(:not([data-only-tertiary], [stacked])) ::slotted([data-first-tertiary]) {
  margin-inline-end: auto;
}

:host([data-only-tertiary]:not([stacked])) {
  justify-content: flex-end;
}