Text Field

$inputDropDownHeight: 54px;
$inputFieldDesktopWidth: 410px;

/*------------------------------------*\
  Default component styles
\*------------------------------------*/

@include fields {
  @include rem(padding, $grid-typo-spacing-xxs + $grid-typo-spacing-xxxs);
  @include rem(height, $inputDropDownHeight);
  background-color: $transparent;
  border: solid 1px $ncFormGrey;
  border-radius: 0;
  box-sizing: border-box;
  display: block;
  transition: border-color $hoverTransLength;
  width: 100%;

  &:hover {
    border-color: $ncMediumGrey;
  }

  &:focus {
    border-color: $ncDarkBlue;
    .promo & {
      border-color: $ncLightOrange;
    }
  }

  .promo & {
    @include rem(height, $inputDropDownHeight - 5);
    min-width: 0;
  }

  @include respond-to($grid-breakpoint-xs) {
    width: $inputFieldDesktopWidth;
    .promo & {
      min-width: 100%;
      width: 100%;
    }
  }
}

.form-item {
  @include rem(margin-top, $grid-typo-spacing-m);

  label,
  legend {
    @extend %text--caption;
    font-weight: bold;
    transition: color $hoverTransLength;
  }

  @include fields {
    @include rem(margin-top, $grid-typo-spacing-xxxs);
  }
}
/*------------------------------------*\
  Text style and labels
\*------------------------------------*/

%form__text--small {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
  font-weight: normal;
}
%form__text--extra-small {
  @include font-size-with-line-height(
    $creditFontSize,
    $grid-typo-spacing-xs - 2
  );
  font-weight: normal;
}

.form-item__description {
  @extend %form__text--small;
  @include rem(margin-bottom, $grid-typo-spacing-xxxs);
}
.form-label--optional {
  font-weight: normal;
}
.form-footer {
  @extend %form__text--small;
  @include rem(margin, $grid-typo-spacing-m 0);
}

/*------------------------------------*\
  Form Buttons
\*------------------------------------*/
input[type='submit'],
input[type='button'] {
  @include button;
  min-width: 0;
  .form-item + & {
    @include rem(margin-top, $grid-typo-spacing-s);
  }
}

/*------------------------------------*\
  Textinput
\*------------------------------------*/

input[type='email'],
input[type='text'],
input[type='url'] {
  @include fields;
}

textarea {
  @include fields;
  @include rem(height, $grid-typo-spacing-xxl);
  @include rem(min-height, $grid-typo-spacing-xxl);
  @include rem(
    max-height,
    $grid-typo-spacing-xxl
  ); // on mobile/tablet, we don't ever want to expand the textarea
  width: 100%;

  @include respond-to($grid-breakpoint-m) {
    @include rem(
      max-height,
      550px
    ); // don't really know where we can reuse this, TODO: think about it a bit more
  }
}

/*------------------------------------*\
      Drupal styling revert
\*------------------------------------*/

/* removes drupal ajax throbber */
.ajax-progress-throbber {
  display: none;
}

/*------------------------------------*\
      misc
\*------------------------------------*/

fieldset[data-form-toggle] {
  @include rem(margin-top, $grid-typo-spacing-m);
  @include rem(padding-top, $grid-typo-spacing-m);
  border-top: solid 1px $ruleAndSeparatorColour;
}

.g-recaptcha {
  @include rem(margin-bottom, $grid-typo-spacing-xs);
}

// once again, we have to override the rule where aria-hidden=true is display:none
.enhanced .toggleable-fieldset[aria-hidden] {
  display: block;
}

.enhanced .toggleable-fieldset {
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.enhanced .toggleable-fieldset--active {
  height: auto;
  opacity: 1;
  overflow: visible;
  position: static;
  transition: opacity 0.5s 0.25s;
}
.form__toggle--enhanced {
  @include rem(
    margin,
    ($grid-typo-spacing-m + $grid-typo-spacing-xxxs) 0 $grid-typo-spacing-xs
  );
  display: block;
}