/*
 * Structural styles for ui-formgroup.
 *
 * Children are laid out as a vertical stack with consistent gaps; each
 * row inherits the standard control height so labels and inputs align.
 */

ui-formgroup {
  display: flex;
  flex-direction: column;
  gap: var(--elation-stack-gap);
  position: relative;
  width: 100%;
  padding: var(--elation-space-2) 0;
}
ui-formgroup > ui-label.groupheader {
  display: block;
  width: 100%;
  padding-bottom: var(--elation-space-1);
  order: -1;
}
ui-formgroup > ui-input,
ui-formgroup > ui-select,
ui-formgroup > ui-toggle,
ui-formgroup > ui-slider,
ui-formgroup > ui-textarea,
ui-formgroup > ui-checkbox {
  display: flex;
  align-items: center;
  gap: var(--elation-space-2);
  width: 100%;
}
ui-formgroup > ui-input > input,
ui-formgroup > ui-textarea > textarea,
ui-formgroup > ui-select > select,
ui-formgroup > ui-slider > ui-slider-track {
  flex: 1 1 auto;
  min-width: 0;
}
ui-formgroup ui-label,
ui-formgroup ui-text {
  flex: 0 0 auto;
  display: inline-block;
  width: 10em;
}

/* Narrow viewports: stack labels above their inputs. */
@media (max-width: 600px) {
  ui-formgroup > ui-input,
  ui-formgroup > ui-select,
  ui-formgroup > ui-toggle,
  ui-formgroup > ui-slider,
  ui-formgroup > ui-textarea,
  ui-formgroup > ui-checkbox {
    flex-direction: column;
    align-items: stretch;
  }
  ui-formgroup ui-label,
  ui-formgroup ui-text {
    width: auto;
  }
}