@use '../../scss/spacers' as spacers;

.form-layout-container {
  // Settes med harde verdier fordi calc() lenger nede ikke støtter spacers.getSpacer()
  --column-gap: 2rem;

  display: flex;
  flex-wrap: wrap;
  gap: spacers.getSpacer(s) var(--column-gap);

  &--large {
    row-gap: spacers.getSpacer(2xs);
  }
}

.form-layout-child {
  min-width: var(--min-col-width);
  flex-basis: calc(100% - var(--column-gap));

  &--two {
    flex-basis: calc(50% - var(--column-gap));
  }

  &--three {
    flex-basis: calc(33% - var(--column-gap));
  }

  &--four {
    flex-basis: calc(25% - var(--column-gap));
  }

  &--five {
    flex-basis: calc(20% - var(--column-gap));
  }
}