// Search
//
//  - Wrap search components in a parent element `role="search"` to increase their discoverability to assistive technologies.
//  - Whenever possible, use the `label` element to explicitly associate text with form elements. The `for` attribute of the label must exactly match the `id` of the form control.
//  - Some form fields do not need explicit `label` elements, when next to a button with descriptive text. Ex. search field next to a button labeled search. In these cases you should still have a `label` in the markup, but you can hide it visually.
//  - Note that placeholders are not recognized by all assistive technologies, and thus are not adequate replacements for appropriate labeling. Additionally, assistive technologies that <b>do</b> announce placeholders will read the placeholder first, then the input's label and then type of input. So be sure not to repeat an input's label as its placeholder, otherwise it will be announced multiple times.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#search_guide">WCAG 2.1 Guidelines</a></h3><div id="search_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/#text-equiv-all" target="_blank">1.1.1 Non-text Content</a> - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic" target="_blank">1.3.1 Info and Relationships</a> - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-descriptive" target="_blank">2.4.6 Headings and Labels</a> - Headings and labels describe topic or purpose. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-minimize-error-cues" target="_blank">3.3.2 Labels or Instructions</a> - Labels or instructions are provided when content requires user input. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-ensure-compat-rsv" target="_blank">4.1.2 Name, Role, Value</a> - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)</p></div><div class="markup"></div></section>
//
//
//
// Markup: search.twig
//
// Style guide: Forms.search

// Import site utilities.
@import '../../global/utils/init';

input[type='search'] {
  background-color: $color-white;
  width: 100%;
  padding: 0.75rem;
  margin: 8px 0 20px;
  box-sizing: border-box;
  border-radius: $border-rd-sm;
  border: 2px solid $color-gallery;
  font-size: $padding-sm;
  min-height: 49px;

  @include breakpoint($bp-sm) {
    width: 25%;
  }
}
