// Mobile Navigation
//
//  - Use the `<button>` element for your mobile navigation icon.
//  - If you use an icon that is purely decoration, declare `alt=""`, as no additional information is needed. If the icon you are using *is* important to the functionality, then supply additional `alt="_descriptive text goes here_"` information.
//  - It is helpful to all users when you add descriptive text when displaying a mobile icon to give more context to the button's purpose.
//  - Place mobile open/close buttons within the `<nav>` element and use them to toggle state of another child wrapper of the nav. This will ensure that the navigation landmark is still discoverable by screen readers, even if it is in a closed/hidden state.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#navbaricon_res">Resources</a></h3><div id="navbaricon_res" class="atblock__panel"><ul><li><a href="http://codepen.io/samikeijonen/pen/jqvxdL" target="_blank">Simple and accessible SVG menu hamburger animation</a></li></ul></div></section>
//
//
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#navbaricon_guide">WCAG 2.1 Guidelines</a></h3><div id="navbaricon_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#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 (some exceptions). (Level A)<br><br><strong>Note:</strong> If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.</p></div><div class="markup"></div></section>
//
//
//
// Markup: navigation-mobile.twig
//
// Style guide: Navigation.navigation-mobile

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

.navbar-mobile-icon {

  button,
  input[type='button'] {
    border: 0;
    background: $color-midnight;
    color: $color-white;
    cursor: pointer;
    display: inline-block;
    padding: 1rem 1.5em;
    text-transform: uppercase;
    border-radius: $border-rd-sm;
  }

  .menu-toggle {
    padding: $padding-sm $padding-sm 0.65rem;
    height: auto;
    text-decoration: none;
  }

  .icon {
    display: inline-block;
    fill: currentColor;
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
    position: relative;
    top: -0.0625rem;
  }

  /* Menu toggle styles. */

  .icon-menu-toggle {
    width: 2rem;
    height: 2rem;
    top: -3px;
  }

  .svg-menu-toggle .line {
    opacity: 1;
    transform: rotate(0) translateY(0) translateX(0);
    transform-origin: 1rem 1em;
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
  }

  .svg-menu-toggle .line-1 {
    transform-origin: 1rem 2.5rem;
  }

  .svg-menu-toggle .line-3 {
    transform-origin: 1rem 4rem;
  }

  .menu-toggle.opened svg {
    left: -1px;
  }

  .menu-toggle.opened .svg-menu-toggle .line-1 {
    transform: rotate(45deg) translateY(0) translateX(0);
  }

  .menu-toggle.opened .svg-menu-toggle .line-2 {
    opacity: 0;
  }

  .menu-toggle.opened .svg-menu-toggle .line-3 {
    transform: rotate(-45deg) translateY(0) translateX(0);
  }

  /* Text meant only for screen readers. */
  .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
}
