// Site navigation desktop layout
// The main layout for the website navigation, for a desktop devices only.

// Main level settings
$absolute-navigation: true;
$color-background-nav-desktop: $color-white;
$color-hover-main-level: $color-white;
$color-main-level: $color-white;
$font-weight-main-level: 700;
$use-dropdown-bubble: true;

// Sub menu settings
$border-radius-sub-menu: 4px;
$color-background-sub-menu: $color-white;
$color-border-sub-menu: rgba($color-black, .05);
$color-hover-sub-menu: $color-hover;
$color-sub-menu: $color-links;
$font-weight-sub-menu: 400;
$width-sub-menu: 22rem;

// CSS variables
// These can be adjusted with media queries for in-between breakpoints
:root {
  // Main level CSS vars
  --font-size-main-level: 16px;
  --font-size-sub-menu: 14px;
  --padding-main-level-vertical: .6rem;
  --padding-main-level-horizontal: 2rem;

  // Sub menu CSS vars
  --gap-dropdown: 1rem;
  --padding-sub-menu-vertical: .4rem;
  --padding-sub-menu-horizontal: 1.5rem;
}

@media only screen and (min-width: $width-max-mobile) {
  // Dropdown bubble
  @if $use-dropdown-bubble == true {
    .menu-item-has-children::before {
      // Use of non-variable is acceptable here because bubble needs it
      /* stylelint-disable sh-waqar/declaration-use-variable */
      border-color: transparent transparent $color-white;
      border-style: solid;
      border-width: 0 5px 5px;
      /* stylelint-enable */
      bottom: -10px;
      content: '';
      display: block;
      height: 0;
      left: 50%;
      margin-left: -20px;
      position: absolute;
      transform: scale(0);
      transform-origin: center bottom;
      transition: none;
      width: 0;
    }
  }

  .nav-primary > ul:first-of-type > .menu-item-has-children:focus::before,
  .nav-primary > ul:first-of-type > .menu-item-has-children:hover::before {
    transform: scale(1);
    transition: all .25s cubic-bezier(.19, 1, .22, 1);
  }

  .sub-menu {
    background: $color-background-sub-menu;
    border-bottom: 1px solid $color-border-sub-menu;
    border-bottom-left-radius: $border-radius-sub-menu;
    border-bottom-right-radius: $border-radius-sub-menu;
    border-left: 1px solid $color-border-sub-menu;
    border-right: 1px solid $color-border-sub-menu;
    border-top-left-radius: $border-radius-sub-menu;
    border-top-right-radius: $border-radius-sub-menu;
    box-shadow: 0 25px 20px -10px rgba(5, 4, 25, .05);
    left: 0;
    opacity: 0;
    position: absolute;
    top: -9999px;
    transition: opacity .25s cubic-bezier(.19, 1, .22, 1);
    visibility: hidden;
    width: $width-sub-menu;
    z-index: -1;

    a {
      line-height: 1.5;
    }
  }

  .nav-primary ul .sub-menu.toggled-on,
  .menu-item-has-children:focus > .sub-menu,
  .menu-item-has-children:hover > .sub-menu,
  .menu-item-has-children.hover-intent > .sub-menu {
    opacity: 1;
    top: 100%;
    transform: translateY(0%);
    visibility: visible;
    z-index: 1;
  }
}

// General navigation resets
.site-header ul {
  list-style: none;
}

@media only screen and (min-width: $width-max-mobile) {
  .nav-container {
    @if $absolute-navigation == false {
      background-color: $color-background-nav-desktop;
      box-shadow: 0 0 10px rgba($color-dark, .1);
      position: relative;
      z-index: 222;
    }

    @if $absolute-navigation == true {
      background-color: transparent;
      position: absolute;
      width: 100%;
    }
  }

  @media only screen and (max-width: $width-max-mobile) {
    ul li:focus > ul,
    ul li:hover > ul {
      display: block;
    }
  }

  // Disable animations on IE10 + IE11
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    // Enable hovers
    ul li:focus > ul,
    ul li:hover > ul {
      display: block;
    }
  }

  // Need to use display: none here to make sure mobile nav-toggle is visually hidden on desktop
  /* stylelint-disable a11y/no-display-none */
  .nav-toggle {
    display: none;
  }
  /* stylelint-enable */

  // Navigation wrapper
  .nav-primary {
    padding-bottom: 0;
    padding-top: 0;
  }

  // Navigation unordered list wrapper element
  .menu-items {
    align-items: center;
    background: transparent;
    display: flex;
    margin: 0;
    padding: 0;
    position: relative;
  }

  // Navigation list item
  .menu-item {
    margin: 0;
    position: relative;
  }

  // Menu items
  .menu-item > a {
    align-items: center;
    color: $color-main-level;
    display: inline-flex;
    font-size: var(--font-size-main-level);
    font-weight: $font-weight-main-level;
    padding-bottom: var(--padding-main-level-vertical);
    padding-left: var(--padding-main-level-horizontal);
    padding-right: var(--padding-main-level-horizontal);
    padding-top: var(--padding-main-level-vertical);
  }

  // Let's make space for the nav-toggle/arrow
  .menu-item.menu-item-has-children a {
    padding-right: 1.5rem;
  }

  .menu-item .sub-menu a {
    align-items: center;
    color: $color-sub-menu;
    display: flex;
    font-size: var(--font-size-sub-menu);
    font-weight: $font-weight-sub-menu;
    padding-bottom: var(--padding-sub-menu-vertical);
    padding-left: var(--padding-sub-menu-horizontal);
    padding-right: var(--padding-sub-menu-horizontal);
    padding-top: var(--padding-sub-menu-vertical);
  }

  .menu-item > a:hover,
  .menu-item > a:focus {
    color: $color-hover-main-level;
  }

  .menu-item .sub-menu a:hover,
  .menu-item .sub-menu a:focus {
    color: $color-sub-menu;
  }

  // Dropdowns
  .sub-menu {
    left: 5%;
    margin-left: 0;
    margin-top: var(--gap-dropdown);
    padding-bottom: .5rem;
    padding-left: 0;
    padding-top: .5rem;
    width: $width-sub-menu;
    z-index: 999;

    // All dropdowns in level 2 and after
    .sub-menu {
      left: 100%;
      margin-left: 0;
      margin-top: -5px;
      top: 0;
    }

    li {
      float: none;
      padding: 0;
      width: $width-sub-menu;
    }
  }

  // Sub menu items that have items under them
  .menu-item.menu-item-has-children {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-right: .8rem;
    position: relative;

    // Add a pseudo element to fill the gap
    // between menu item and sub menu to help hovering
    &::after {
      content: '';
      display: block;
      height: var(--gap-dropdown);
      position: absolute;
      top: 100%;
      width: 100%;
    }
  }

  // Main level toggle icon
  .dropdown-toggle.toggled-on svg {
    transform: rotateX(180deg);
  }

  .dropdown-toggle {
    align-items: center;
    background-color: transparent;
    border: 0;
    display: inline-flex;
    justify-content: center;
    padding: 0;
  }

  // Sub-menu toggle icon
  .sub-menu .dropdown-toggle {
    width: 3rem;
  }

  .sub-menu .dropdown-toggle svg {
    transform: rotate(-90deg) rotateX(0deg);
  }

  .sub-menu .dropdown-toggle.toggled-on svg {
    transform: rotate(-90deg) rotateX(180deg);
  }

  // Don't use gap filler in sub menu items
  // Acceptable use of display: none here, for visual/technical purposes
  /* stylelint-disable a11y/no-display-none */
  .sub-menu .menu-item-has-children::after {
    display: none;
  }
  /* stylelint-enable */
} // @media only screen and (min-width: $width-max-mobile)