// Basic Navigation
//
//  - All navigation elements should have a `<nav>` tag.
//  - If you have to use a more generic element such as a `<div>`, add `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
//  - Menus should be labeled according to their individual function. Use can use `class="visuallyhidden">`, `aria-label=""`, or `aria-labelledby=""` to easily add context to the different menus on your site.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#navbar_guide">WCAG 2.1 Guidelines</a></h3><div id="navbar_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-focus-order" target="_blank">2.4.3 Focus Order</a> - If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-mult-loc" target="_blank">2.4.5 Multiple Ways</a> - More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-focus-visible" target="_blank">2.4.7 Focus Visible</a> - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-location" target="_blank">2.4.8 Location</a> - Information about the user's location within a set of Web pages is available. (Level AAA)<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: navigation-basic.twig
//
// Style guide: Navigation.navigation-basic

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

.navbar {
  position: relative;
  margin-bottom: $padding-sm;
  border-radius: $border-rd-sm;
  display: inline-block;
  width: 100%;
  overflow: hidden;

  .menu3 a {
    color: $color-midnight;
    padding: 10px 15px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);

    &:last-child {
      border-right: 0;

      &:hover,
      &:active {
        border-right: 0;
        border-top-right-radius: $border-rd-sm;
        border-bottom-right-radius: $border-rd-sm;
      }
    }

    &:first-child {
      border-left: 0;

      &:hover,
      &:active {
        border-left: 0;
        border-top-left-radius: $border-rd-sm;
        border-bottom-left-radius: $border-rd-sm;
      }
    }

    &:hover,
    &:active {
      background: $color-cherry;
      color: $color-white;
      text-decoration: none;
    }
  }

  ul {
    padding: 0;

    li {
      padding-bottom: 0;
    }
  }

  .nav-item {
    display: table-cell;
  }
}
