// Form item
//
// Wrapper for a form element (or group of form elements) and its label.

.form-item,
%form-item {

  // The part of the label that indicates a required field.
  &__required {
    color: color(form-error);
  }

  // The descriptive help text (separate from the label).
  &__description {
    @include font-size(xs);
  }

  &--inline {
    // Inherit from agov_base.
  }

  &--tight {
    // Inherit from agov_base.
  }

// Form item (radio)
//
// Checkboxes and radios require slightly different markup; their label is after
// their widget instead of before. Uses the `.form-item--radio` class variant of
// the normal form item and is placed on each of the nested form items.

  &--radio {
    // Inherit from agov_base.
  }

  &--radio__label,
  &--radio &__label {
    font-family: $font-body;
  }

  &--radio__description,
  &--radio &__description {
    margin-left: 1.4em;
  }

  &.is-error &__widget,
  &-is-error__widget {
    border: 1px solid color(form-error);
  }

  &.is-error,
  &-is-error {
    input,
    textarea,
    select {
      @extend %form-item-is-error__widget;
    }
  }
}

