// Dependencies.
@import 'components/clearfix/clearfix';

// Form item
//
// Wrapper for a form element (or group of form elements) and its label.
//
// .form-item--inline - Inline form items.
// .form-item--tight  - Packs groups of form items closer together.
// .is-error          - Highlight the form elements that caused a form
//                      submission error.
//
// Markup: form-item.hbs
//
// Style guide: components.forms.form-item

// 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.
//
// .is-error - Highlight the form elements that caused a form submission error.
//
// Markup: form-item--radio.hbs
//
// Style guide: components.forms.form-item--radio

.form-item,
%form-item {
  margin-bottom: 36px;

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

  // The descriptive help text (separate from the label).
  &__description {
    font-size: .85em;
  }

  &--inline {
    div,
    label {
      display: inline;
    }

    // There's always an exception.
    &__exception {
      display: block;
    }
  }

  &--tight {
    margin: 0;
  }

  &--radio {
    @extend %form-item--tight;
  }

  &--radio__label,
  &--radio &__label {
    display: inline;
    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;
    }
  }
}

//
// Drupal selectors.
//

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

  .description {
    @extend %form-item__description;
  }
}

.form-required {
  @extend %form-item__required;
}

// Password confirmation.
.password-parent,
.confirm-parent {
  @extend %form-item--tight;
}

table {
  .form-item {
    @extend %form-item--tight;
  }
}

.form-type-radio,
.form-type-checkbox {
  @extend %form-item--radio;

  .description {
    @extend %form-item--radio__description;
  }
}

label.option {
  @extend %form-item--radio__label;
}

.container-inline {
  .form-item {
    @extend %form-item--inline;
  }

  // Fieldset contents always need to be rendered as block.
  .fieldset-wrapper {
    @extend %form-item--inline__exception;
  }
}
