$input-group-component-min-size: 10rem;

.input-group-wrapper {
  display: block;
  width: 100%;

  .input-group-content {
    display: flex;
    flex-wrap: wrap;
    margin-top: -1 * gutter('sm');
    margin-left: -1 * gutter('sm');

    > * {
      flex: 1 1 $input-group-component-min-size;
      margin-top: gutter('sm');
      margin-left: gutter('sm');
    }

    &.input-group-content--condensed {
      > * {
        flex: 1 1 $input-group-component-min-size/2;
      }
    }

    .input-group__item--auto {
      flex: 0 0 auto;
    }

    .input-group__item--full {
      flex: 1 1 100%;
    }
  }
}