// Read More Links
//
// - Add id selectors to titles or paragraphs and use `aria-labelledby=""` to link to the title text (Example #1).
// - Add descriptive text with `aria-label=""` directly in the link (Example #2).
// - Use the class `visuallyhidden` to visually hide more information about the link (Example #3). Note that <a href="https://github.com/h5bp/main.css/issues/12">VoiceOver can cause unintended reading order of visually hidden content in interactive elements</a>.
// - Turn read more links into buttons, when you can, since they allow for more labeling options.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#read_guide">WCAG 2.1 Guidelines</a></h3><div id="read_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#navigation-mechanisms-refs" target="_blank">2.4.4 Link Purpose (In Context)</a>: The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#navigation-mechanisms-link" target="_blank">2.4.9 Link Purpose (Link Only)</a>: A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA)</p></div><div class="markup"></div></section>
//
//
//
// Markup: read-more.twig
//
// Style guide: General.read-more

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

.read-more {

  &::after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 7px solid transparent;
    border-left-color: $color-cherry;
    margin-left: 6px;
    margin-top: 5px;
  }
}
