/// Provides styles for the Form element.
/// @group forms
/// @author Richard Davis
/// @example
///   // A form with form groups enclosing inputs
///   <form class="Form">
///     <div class="Form__group">
///       <label>Lorem Ipsum</label>
///       <input type="text" />
///     </div>
///     <div class="Form__group">
///       <label class="field_with_errors">Lorem Ipsum</label>
///       <input class="field_with_errors" type="text" />
///     </div>
///     <div class="Form__group">
///       <label>Lorem Ipsum</label>
///       <input type="text" />
///       <small>This is a form hint</small>
///     </div>
///     <div class="Form__group u-Element--long">
///       <label>Lorem Ipsum</label>
///       <input type="text" />
///       <small>This is a form hint</small>
///     </div>
///     <div class="Form__group u-Element--medium">
///       <label>Lorem Ipsum</label>
///       <input type="text" />
///       <small>This is a form hint</small>
///     </div>
///     <div class="Form__group u-Element--short">
///       <label>Lorem Ipsum</label>
///       <input type="text" />
///       <small>This is a form hint</small>
///     </div>
///     <div class="Form__group--boxed">
///       <label>Lorem Ipsum</label>
///       <input type="text" />
///       <small>This is a form hint</small>
///     </div>
///     <div class="Form__action">
///       <input type="submit" class="Button--solid-primary" value="Lorem Ipsum" />
///     </div>
///   </form>
.Form {
  width: 100%;
  margin: auto;

  &__group {
    @extend %basic-form-group-styling;

    label {
      @extend %basic-label-styling;
    }

    input,
    select {
      @extend %basic-form-field-styling;
      @extend %basic-input-styling;
    }

    textarea {
      @extend %basic-form-field-styling;
      @extend %basic-textarea-styling;
    }

    fieldset {
      @extend %basic-fieldset-styling;
    }

    legend {
      @extend %basic-legend-styling;
    }

    small {
      @extend %basic-form-hint-styling;
    }

    &--boxed {
      @extend %boxed-form-group-styling;

      @include boxed-form-group-colors(grayscale-color(40), grayscale-color(90), $white);

      label {
        @extend %boxed-label-styling;
      }

      input,
      select {
        @extend %basic-form-field-styling;
        @extend %boxed-input-styling;
      }

      textarea {
        @extend %basic-form-field-styling;
        @extend %boxed-textarea-styling;
      }

      fieldset {
        @extend %basic-fieldset-styling;
      }

      legend {
        @extend %basic-legend-styling;
      }

      small {
        @extend %boxed-form-hint-styling;
      }
    }
  }

  &__action {
    text-align: center;
    margin-top: (spacing-size(3) - (spacing-size(4) / 6));
  }
}