.webform-flex {
  /**
   * Composite.
   */
  /**
   * Radios/checkboxes.
   */
}

.webform-flexbox {
  margin-bottom: 0;
}

.webform-flex--container > .form-item {
  margin-bottom: 24px;
}

.webform-flex--container > .form-item:last-child {
  margin-bottom: 24px;
}

.webform-flex .container-inline .webform-flex--container > .form-item > input:not([type="checkbox"]),
.webform-flex .container-inline .webform-flex--container > .form-item > select,
.webform-flex .webform-flex--container > .form-item.webform-element--title-inline > input:not([type="checkbox"]),
.webform-flex .webform-flex--container > .form-item.webform-element--title-inline > select {
  width: inherit;
}

.webform-flex .webform-flex--container > .webform-has-field-prefix > input:not([type="checkbox"]),
.webform-flex .webform-flex--container > .webform-has-field-prefix > select,
.webform-flex .webform-flex--container > .webform-has-field-suffix > input:not([type="checkbox"]),
.webform-flex .webform-flex--container > .webform-has-field-suffix > select {
  width: 85%;
}

.webform-flex .webform-flex--container > .webform-has-field-prefix.webform-flex.webform-has-field-suffix > input:not([type="checkbox"]),
.webform-flex .webform-flex--container > .webform-has-field-prefix.webform-flex.webform-has-field-suffix > select {
  width: 70%;
}

.webform-flex .webform-flex--container > .webform-element-help-container--element > input:not([type="checkbox"]),
.webform-flex .webform-flex--container > .webform-element-help-container--element > select {
  width: 85%;
}

.webform-flex .webform-flex--container > .webform-has-field-prefix.webform-element-help-container--element > input:not([type="checkbox"]),
.webform-flex .webform-flex--container > .webform-has-field-prefix.webform-element-help-container--element > select {
  width: 70%;
}

.webform-flex .webform-flex--container > .webform-has-field-prefix.webform-has-field-suffix.webform-element-help-container--element > input:not([type="checkbox"]),
.webform-flex .webform-flex--container > .webform-has-field-prefix.webform-has-field-suffix.webform-element-help-container--element > select {
  width: 50%;
}

.webform-flex .webform-flex--container {
  /**
     * Select other.
     */
  /**
     * Range.
     */
}

.webform-flex .webform-flex--container > .form-type-webform-select-other select {
  width: 100%;
}

.webform-flex .webform-flex--container > .form-type-webform-select-other .form-item {
  margin: 0;
}

.webform-flex .webform-flex--container > .form-type-webform-select-other .form-item + .form-item {
  margin-top: 0.5em;
}

.webform-flex .webform-flex--container > .form-type-range-output > .form-range-output {
  width: 66%;
}

.webform-flex .form-composite > .webform-flexbox {
  margin: 1em -0.5em;
}

.webform-flex .webform-flex--container .form-type-checkbox,
.webform-flex .webform-flex--container .form-type-radio {
  white-space: nowrap;
}

.webform-flexbox {
  align-items: flex-end;
}

@media (min-width: 48rem) {
  .webform-flex {
    min-width: 0;
  }
  .webform-flexbox {
    display: flex;
    margin: 0 calc(var(--gutter) / -2);
    /**
       * Make sure flexbox is always using 'display: flex' when toggled via #states.
       * @see https://stackoverflow.com/questions/38491653/jquery-show-a-flex-box/4121
       */
  }
  .webform-flexbox.js-webform-states-hidden[style*="display: block"] {
    display: flex !important;
  }
  .webform-flexbox .webform-flexbox {
    margin: 1em 0;
  }
  .webform-flexbox--flex-start {
    align-items: flex-start;
  }
  .webform-flexbox--flex-end {
    align-items: flex-end;
  }
  .webform-flexbox--center {
    align-items: center;
  }
  .webform-flexbox .webform-flex--1 {
    flex: 1;
  }
  .webform-flexbox .webform-flex--2 {
    flex: 2;
  }
  .webform-flexbox .webform-flex--3 {
    flex: 3;
  }
  .webform-flexbox .webform-flex--4 {
    flex: 4;
  }
  .webform-flexbox .webform-flex--5 {
    flex: 5;
  }
  .webform-flexbox .webform-flex--6 {
    flex: 6;
  }
  .webform-flexbox .webform-flex--7 {
    flex: 7;
  }
  .webform-flexbox .webform-flex--8 {
    flex: 8;
  }
  .webform-flexbox .webform-flex--9 {
    flex: 9;
  }
  .webform-flexbox .webform-flex--10 {
    flex: 10;
  }
  .webform-flexbox .webform-flex--11 {
    flex: 11;
  }
  .webform-flexbox .webform-flex--12 {
    flex: 12;
  }
  .webform-flex--container {
    margin: 0 calc(var(--gutter) / 2);
  }
  .webform-flex--container > .form-item > input:not([type="checkbox"]),
  .webform-flex--container > .form-item > select {
    width: 100%;
  }
}

@media all and (min-width: 64rem) {
  .webform-flex--container {
    --gutter: 32px;
  }
}