@include b(form-group) {
  @include set-component-css-var('form-group', $form-group);
  @include set-component-css-var('form-group-header', $form-group-header);
  @include set-component-css-var('form-group-caption', $form-group-caption);
  @include set-component-css-var('form-group-content', $form-group-content);
}

@include b(form-group) {
  width: 100%;
  height: 100%;
  background-color: getCssVar('form-group', 'bg-color');
  @include when(collapse) {
    @include b(form-group-content) {
      display: block;
    }
  }

  @include e(caption) {
    @include utils-ellipsis;

    font-family: getCssVar('form-group-caption', 'font-family');
    font-size: getCssVar('form-group-caption', 'font-size');
    color: getCssVar('form-group-caption', 'text-color');
  }

  @include e(toolbar) {
    text-align: right;
  }
}

@include b(form-group-collapse) {
  @include b(form-group-content) {
    display: none;
  }
}

@include b(form-group-header) {
  padding: calc(getCssVar('form-group-header', 'padding') / 2);
  border-bottom: #{getCssVar('border-width')} #{getCssVar('border-style')} #{getCssVar(
      'border-color'
    )};

  @include e((left, right)) {
    display: inline-block;
    width: 50%;
  }

  @include e(right) {
    text-align: right;
  }
}

.#{bem('form-group', '', 'show-header')} {
  > .#{bem('form-group-content')} {
    padding: getCssVar('form-group-content', 'padding');
  }
}
