@import '../../styles/common';

$item-min-size: rem(220px);

.FormLayout {
  margin-top: -1 * spacing();
  margin-left: -1 * spacing(loose);
}

.Title {
  margin-bottom: -1 * spacing(tight);
  padding: spacing() spacing(loose) 0;
}

.Items {
  display: flex;
  flex-wrap: wrap;
}

.HelpText {
  @include text-emphasis-subdued;
  padding: spacing(tight) spacing(loose) 0;
}

.Item {
  flex: 1 1 $item-min-size;
  margin-top: spacing();
  margin-left: spacing(loose);
  max-width: calc(100% - #{spacing(loose)});

  .grouped & {
    min-width: $item-min-size;
  }

  .condensed & {
    flex-basis: (0.5 * $item-min-size);
    min-width: (0.5 * $item-min-size);
  }
}
