:host {
  display: block;
}

// The body holds the form group and the actions row; the gap is what separates them.
.panel__body {
  gap: var(--zn-spacing-medium);
}

// The fields land in the form group's 6-column input grid, but they are assigned to this slot rather than the
// group's, so its span rules cannot reach them — each takes the full row from here.
::slotted(:not([slot])) {
  grid-column: 1 / -1;
}

// The select's label is its accessible name only; the caption names the section on screen.
.translation-group__language-select::part(form-control-label) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

// Matches zinc's form action rows (.form-actions, zn-form-actions): right-aligned, 16px apart. The cap holds the
// buttons level with the fields' right edge, which zn-form-group sizes to the same container.
.translation-group__actions {
  display: flex;
  align-items: center;
  gap: var(--zn-spacing-small);
  max-width: var(--zn-container-lg);
}

// The spacer, not an auto margin, is what splits the two sides: an auto margin on every right-hand button would open
// a gap between each of them, where one flexing element in the middle holds any number on either side together.
.translation-group__actions-spacer {
  order: 1;
  flex: 1 1 auto;
}

::slotted([slot="actions"]) {
  order: 2;
}

::slotted([slot="actions"][align="start"]) {
  order: 0;
}

// The panel draws a border between any two body children, and the actions row follows the form group. Matched on
// .panel--has-actions to out-specify that rule.
.panel--has-actions .panel__body > .translation-group__actions {
  border: 0;
}

// The panel clips its content to its rounded corners, and the body scrolls. Neither applies with the chrome gone, and
// both would cut the focus ring off a field now that no padding stands between it and the body's edge.
.translation-group--inline {
  .panel__inner,
  .panel__content,
  .panel__body {
    overflow: visible;
  }
}