// Select Lists
//
//  - The `<fieldset>` surrounds the entire grouping of checkboxes or radio buttons. The `<legend>` provides a description for the grouping.
//  - Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of radio buttons.
//  - For select elements with groups of options, the `optgroup` element can be used to indicate such groups. The `label` attribute of the `optgroup` element is used to provide a label for the group. This is especially useful for lists with many related options.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#select_guide">WCAG 2.1 Guidelines</a></h3><div id="select_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: select-lists.twig
//
// Style guide: Forms.select-lists

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

.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
  margin-left: -2px;
}

.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 15px;
  border: 0;
  background: $color-gallery;
  color: $color-cherry;
  appearance: none;
  font-size: $padding-sm;
  border-radius: $border-rd-sm;

  &:hover,
  &:focus {
    color: $color-midnight;
    background: $color-gallery;
  }

  &:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &:hover ~ .select__arrow,
  &:focus ~ .select__arrow {
    border-top-color: $color-midnight;
  }

  &:disabled ~ .select__arrow {
    border-top-color: $color-gallery;
  }
}

.select__arrow {
  position: absolute;
  top: 20px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 10px 8px 0;
  border-color: $color-cherry transparent transparent;
}
