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

$item-min-size: 220px;

.FormLayout {
  margin-top: calc(-1 * var(--p-space-4));
  margin-left: calc(-1 * var(--p-space-5));
}

.Title {
  margin-bottom: calc(-1 * var(--p-space-2));
  padding: var(--p-space-4) var(--p-space-5) 0;
}

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

.HelpText {
  @include text-emphasis-subdued;
  padding: var(--p-space-2) var(--p-space-5) 0;
}

.Item {
  flex: 1 1 $item-min-size;
  margin-top: var(--p-space-4);
  margin-left: var(--p-space-5);
  max-width: calc(100% - var(--p-space-5));

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

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