/* ==========================================================================
   Forms extends and mixins
   ========================================================================== */
@include foundation-forms;
// @import "forms/mixins";

/* ==========================================================================
   Forms
   ========================================================================== */

.gform_wrapper {
  margin: 0;

  input[type="text"] {
    width: 100%;
  }
  textarea {
    width: 100%;
    height: 150px
  }
}

.gform_title {
  padding: $global-padding/2 $global-padding;
  color: $white;
  background-color: teal;
  margin: 0;

  @include breakpoint (small only) {
    font-size: rem-calc(20);
  }
}

.gform_description {
  padding: $global-padding;
  display: block;
  color: $medium-gray;
}

.gform_body,
.validation_error {
  padding: 0 $global-padding;
}

.gform_fields {
  list-style-type: none;
  margin: 0;
}

.gfield_required,
.validation_error {
  color: $black;
  margin-bottom: $global-margin;
}

.ginput_recaptcha {
  margin-bottom: $global-margin;
}

.gform_footer {
  padding: 0 $global-padding $global-padding;
  margin: 0;
}

.gform_button {
  @extend .button;
  font-weight: bold;
  border-width: 2px;
  border-radius: rem-calc(4);
  transition: all 1s ease !important;

  &:hover,
  &:active,
  &:focus {
    background-color: transparent !important;
    box-shadow: none;
  }
}

.gfield_error {
  input,
  textarea {
    border-color: $black;
  }
}
.validation_message {
  background: $black;
  margin-top: -$global-margin;
  padding: $global-padding/4 $global-padding/2;
  margin-bottom: $global-margin;
  color: $white;
}

.gform_confirmation_wrapper {
  padding: $global-padding*2;
}

.gform_confirmation_message {
  @extend h4;
}