// Radio Buttons
//
// - 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.
// - WAI-ARIA provides a grouping role that functions similarly to `fieldset` and `legend`. In option #2 the `div` element has `role=group` to indicate that the contained elements are members of a group and the `aria-labelledby` attribute references the id for text that will serve as the label for the group.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#radio_guide">WCAG 2.1 Guidelines</a></h3><div id="radio_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: radio-buttons.twig
//
// Style guide: Forms.radio-buttons

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

.radio {

  &.row label {
    display: block;
    float: left;
  }

  &.column {
    margin-top: -1.5rem;
    padding: 0 $padding-sm $padding-sm;

    label {
      display: block;
    }
  }
}

.radio input[type='radio'] {
  opacity: 0;
}

.radio label {
  position: relative;
  padding: 0 $padding-md-lg 0 $padding-md;
}

.radio label::before,
.radio label::after {
  position: absolute;
  content: '';
  display: inline-block;
}

.radio label::before {
  height: 22px;
  width: 22px;
  left: 0;
  top: 1px;
  background: $color-gallery;
  border-radius: 50%;
  border: 1px solid $color-silver;
}

.radio label::after {
  left: 4px;
  top: 5px;
  width: 13px;
  height: 13px;
  border: 7px solid $color-cherry;
  border-radius: 50%;
}

.radio input[type='radio'] + label::after {
  content: none;
}

.radio input[type='radio']:checked + label::after {
  content: '';
}

.radio input[type='radio']:focus + label::before {
  outline: auto 2px Highlight; // for non-webkit browsers
  outline: auto 5px -webkit-focus-ring-color; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties
}
