@use '../../abstract' as *;
.form {
  display:flex; flex-direction:column;
  &-header {
    display: grid;
    gap: pxToRem(16);
    padding-block-end: pxToRem(32);
    border-block-end: solid pxToRem(1) hsl(var(--color-border));
    margin-block-end: pxToRem(32);
    :where([class*=heading-]) { margin-block:0; }
  }
  &-content {
    display:flex; flex-direction:column; gap:pxToRem(16); padding-block-end:pxToRem(32);
  }
  &-footer {
    padding-block:pxToRem(32); margin-block-start:pxToRem(32);
    border-block-start:solid pxToRem(1) hsl(var(--color-border));
  }
  &-list {
    $gap: pxToRem(24);
    --p-form-list-gap:var(--form-list-gap, #{$gap});
    display:grid; gap:var(--p-form-list-gap);

    &.is-multiple { grid-template-columns: repeat(auto-fit, minmax(pxToRem(180), 1fr)); }
  }
  &-item {
    &.is-multiple { display:flex; gap:pxToRem(8); }
    &.is-span-2 { grid-column:span 2;}
    &-part {  }
  }
}