@apos-forms-spacing: 35px;

.apos-forms-hidden {
  display: none;
}
// TODO: refactor to remove apos-forms-visible. We can't depend on the parent
// having the right display property. `initial` could work better, but simply
// hiding and unhiding is safer. The `hidden` HTML attribute could work as well.
.apos-forms-visible {
  display: inherit;
}

.apos-forms-input,
.apos-forms-fieldset {
  .apos-ui & {
    margin-bottom: @apos-forms-spacing;
  }
}

.apos-forms-checkboxes--dropdown {
  display: inline-block;
}

.apos-forms-checkboxes-toggle {
  width: auto;
}

.apos-forms-checkboxes-toggle:after {
  padding-left: 24px;
  content: '▶';
  .apos-forms-checkboxes-dropdown--active & {
    padding-left: 24px;
    content: '▲';
  }
}

.apos-forms-checkboxes-dropdown-choices {
  width: auto;
  height: 0px;
  overflow: hidden;
  label {
    width: auto;
    display: block;
    line-height: 1.5;
  }
  .apos-forms-checkboxes--dropdown-active & {
    height: auto;
    overflow: auto;
  }
}