// TODO: abstract and integrate @mixin search-icon {

@include add-background-svg("usa-icons-bg/search--white");
background-position: center center;
background-size: units(3);

}

.usa-search {

@include border-box-sizing;
@include clearfix;
@include typeset($theme-search-font-family);
position: relative;

// if role is in the <form> element (>=2.6.0)...
&[role="search"],
// if there is a (=2.5.[0,1])...
&[role="search"] > div,
// ...or if the component has a separate <div[role="search"]> (<=2.4.0)
[role="search"] {
  display: flex;
}

[type="submit"] {
  @include search-icon;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  height: units(4);
  margin: 0;
  padding: 0;
  width: units($theme-button-small-width);

  @include at-media("mobile-lg") {
    @include u-padding-x(2);
    background-image: none;
    width: auto;
  }
}

}

.usa-search–big {

$height: units(6);

[type="search"],
.usa-search__input {
  @include at-media("mobile-lg") {
    font-size: font-size($theme-search-font-family, "sm");
    height: $height;
  }
}

[type="submit"],
.usa-search__submit {
  @include at-media("mobile-lg") {
    @include u-padding-x(4);
    font-size: font-size($theme-search-font-family, "lg");
    height: $height;
    width: auto;
  }
}

}

.usa-search–small {

[type="submit"],
.usa-search__submit {
  @include at-media("mobile-lg") {
    @include search-icon;
    width: units($theme-button-small-width);
  }
}

}

// Extra specificity to override rules set in normalize.css. input {

/* stylelint-disable-line selector-no-qualifying-type */
box-sizing: border-box;
appearance: none;

}

[type=“search”], .usa-search__input {

@include u-padding-y(0);
border-bottom-right-radius: 0;
border-right: none;
border-top-right-radius: 0;
box-sizing: border-box;
float: left;
font-size: font-size($theme-search-font-family, "xs");
height: units(4);
margin: 0;

}

.usa-search__submit-text {

@include sr-only;

@include at-media("mobile-lg") {
  @include not-sr-only;
}

}