/// Provides styles for the InlineForm element.
/// @group forms
/// @author Richard Davis
/// @example
///   // An inline form
///   <form class="InlineForm">
///     <input type="text" />
///     <input type="submit" class="Button--solid-safe" value="Lorem Ipsum" />
///   </form>
.InlineForm {
  display: flex;
  flex-direction: column;
  justify-content: center;

  @include breakpoint-s {
    flex-flow: row wrap;
  }

  &__input {
    @extend %basic-form-field-styling;

    flex-grow: 8;
    padding: spacing-size(2);
    margin: spacing-size(1);

    @include breakpoint-s {
      margin: spacing-size(1);
    }

    &--topBorder {
      @extend .InlineForm__input;

      @include top-border-accent($black, grayscale-color(30));
    }

    &--rightBorder {
      @extend .InlineForm__input;

      @include right-border-accent($black, grayscale-color(30));
    }

    &--bottomBorder {
      @extend .InlineForm__input;

      @include bottom-border-accent($black, grayscale-color(30));
    }

    &--leftBorder {
      @extend .InlineForm__input;

      @include left-border-accent($black, grayscale-color(30));
    }
  }

  &__action {
    flex: 1;
    margin: spacing-size(1);

    @include breakpoint-s {
      flex: 0;
    }
  }
}