.fieldset {
  --container-gap: 12px;

  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
  color: var(--color-text-primary);
  font-size: 15px;
}

.fieldsWrapper {
  display: flex;
  flex-direction: column;
  row-gap: 8px;

  &[data-layout='horizontal'] {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 24px;
  }
}

.status {
  // If there's no content, we need to compensate for the parent's
  // flex gap to avoid extra spacing below the field.
  &:empty {
    margin-top: calc(-1 * var(--container-gap));
  }
}