// Helpers

$input-select-margin-right: 1.5;

%block-input-general {
  @include border-box-sizing;
  @include typeset(
    $theme-form-font-family,
    $theme-body-font-size,
    $theme-input-line-height
  );
}

%block-input-styles {
  @include u-border(1px, "base-dark");
  appearance: none;
  border-radius: 0;
  color: color("ink"); // standardize on firefox
  display: block;
  height: units(5);
  margin-top: units(1);
  max-width: units($theme-input-max-width);
  padding: units(1);
  width: 100%;

  &.usa-input--success {
    @include u-border($theme-input-state-border-width, "success");
  }
}

// Block input elements
.usa-fieldset,
.usa-hint {
  @extend %block-input-general;
}

.usa-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.usa-form-group {
  margin-top: units(3);

  // Let form-group handle top margin
  .usa-label:first-child {
    margin-top: 0;
  }
}

.usa-form-group--error {
  @include u-border-left(0.5, "error-dark");
  margin-top: units(4);
  padding-left: units(2);
  position: relative;

  @include at-media("desktop") {
    margin-left: units(-2.5);
  }
}

.usa-error-message {
  @include u-padding-y(0.5);
  color: color("error-dark");
  display: block;
  font-weight: font-weight("bold");
}

.usa-hint {
  color: color("base");
}

.usa-label,
.usa-legend {
  @include typeset(
    $theme-form-font-family,
    $theme-body-font-size,
    $theme-input-line-height
  );
  display: block;
  font-weight: font-weight("normal");
  margin-top: units(3);
  max-width: units($theme-input-max-width);
}

.usa-label--error {
  font-weight: font-weight("bold");
  margin-top: 0;
}

.usa-label--required,
.usa-hint--required {
  color: color("error-dark");
}

.usa-legend--large {
  font-size: font-size($theme-form-font-family, "xl");
  font-weight: font-weight("bold");
  margin-top: units(2);
}

// Don't show dotted underline with "required" asterisk because it can cause legibility issues ad appear as an ellipsis...
abbr[title="required"] {
  text-decoration: none;
}