// 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–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 {

text-decoration: none;

}