/**
 * Navigation: Mobile View
 */
$page-nav-mobile-width: 240px;
$page-nav-bg-color: $gray-dark;
$page-nav-link-color: #eaeaea;

@media (max-width: $screen-sm-max) {
  .page-nav-container {
    padding: $padding-large-vertical;
  }
  // Navigation Toggle
  .page-nav-toggle {
    background-color: transparent;
    cursor: pointer;
    display: block;
    float: right;
    height: 32px;
    position: relative;
    width: 32px;

    &:active, &:hover, &:visited, &.active {
      background: none;
      box-shadow: none;
    }

    .bar {
      background-color: $page-nav-bg-color;
      border-radius: 3px;
      display: block;
      height: 3px;
      left: 0;
      position: absolute;
      width: 100%;
      transition: all .2s ease-in-out;
    }

    .bar:nth-child(1) {
      top: 4px;
    }
    .bar:nth-child(2) {
      top: 12px;
    }
    .bar:nth-child(3) {
      top: 20px;
    }

    &.active .bar:nth-child(1) {
      transform: rotate(45deg);
      top: 14px;
    }
    &.active .bar:nth-child(2) {
      opacity: 0;
    }
    &.active .bar:nth-child(3) {
      transform: rotate(-45deg);
      top: 14px;
    }
  }

  // Navigation Container
  .page-nav {
    background-color: $page-nav-bg-color;
    box-shadow: 3px -1px 3px rgba(0,0,0,0.25);
    border-right: 1px solid #000;
    bottom: 0;
    display: block;
    height: auto !important;
    left: -($page-nav-mobile-width + $padding-large-horizontal);
    overflow: scroll;
    position: fixed;
    top: 0;
    width: $page-nav-mobile-width;
    transition: left .2s ease-out;
    z-index: 2000;
  }

  // Navigation Container Toggled to Display
  .page-nav.in {
    left: 0;
    transition: left .1s ease-in;
  }

  // Navigation List
  .page-nav-list {
    display: block;
    list-style: none;
    margin: 0;
    padding: ($padding-large-vertical * 2);
  }

  // Navigation Item
  .page-nav-item {
    display: block;
    font-size: 14px;
    text-transform: uppercase;

    > a {
      color: $page-nav-link-color;
      border-bottom: 1px solid $gray-darker;
      display: block;
      font-weight: 600;
      padding: $padding-large-vertical;
      position: relative;

      &:before {
        background-color: $page-nav-link-color;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 0;
        position: absolute;
        width: 0;
        transition: all .4s ease-in-out;
      }

      /*&:hover {
        color: lighten($page-nav-link-color, 15%);
        text-decoration: none;

        &:before {
          background-color: $page-nav-link-color;
          width: 100%;
        }
      }*/
    }

    &.page-nav-item--active > a {
      color: #fff;
      &:before {
        background-color: #fff;
        width: 100%;
      }
    }
  }

  .dropdown-backdrop {
    display: none;
  }

  .page-nav-dropdown {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    float: none;
    min-width: 100%;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    > li > a {
      clear: both;
      color: #eaeaea;
      display: block;
      font-weight: normal;
      padding: $padding-large-vertical;
      text-transform: none;
      white-space: nowrap;

      &:hover {
        background-color: transparent;
        color: #fff;
      }
    }
  }
}

@media (min-width: $screen-sm-max) {
  // Navigation Toggle
  .page-nav-toggle {
    display: none;
  }

  .page-nav {
    display: block !important;
  }

  // Navigation List
  .page-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;

    // Navigation Item
    > .page-nav-item {
      display: inline;
    }

    .page-nav-dropdown {
      border-top: 2px solid $brand-primary;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      top: 196%;

      // Dropdown links
      > li > a {
        padding-bottom: 8px;
        padding-top: 8px;
      }

      // Dropdown arrow-top
      &:after {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(51, 122, 183, 0);
        border-bottom-color: $brand-primary;
        border-width: 8px;
        margin-left: -8px;
      }
    }

    // Navigation Link
    > .page-nav-item > a {
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      color: $gray-dark;
      font-weight: 600;
      font-family: $font-family-sans-serif;
      letter-spacing: .02em;
      line-height: 24px;
      padding: $padding-large-vertical * 2;
      position: relative;
      text-decoration: none;
      text-transform: uppercase;
      transition: color .4s ease-out;

      // Navigation Link Hover
      &:hover {
        color: $gray;
        text-decoration: none;
        transition: color .4s ease-in;

        &:after {
          background-color: $gray;
          left: 0;
          right: 0;
          z-index: 100;
        }
      }

      // Underline
      &:after {
        background-color: transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 20px;
        margin: auto;
        position: absolute;
        right: 20px;
        //width: 0;
        transition: all .4s ease-in-out;
      }
    }

    // Navigation Link Active
    > .page-nav-item--active.exact-active > a {
      color: $brand-primary;
      position: relative;
      transition: all .4s ease-in-out;

      &:hover {
        color: $brand-primary;

        &:after {
          background-color: $brand-primary;
        }
      }

      &:after {
        background-color: $brand-primary;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 20px;
        position: absolute;
        right: 20px;
        transition: all .4s ease-in-out;
      }
    }
  }

  // Navigation pulled Left
  .page-nav--left {
    float: left;
  }

  // Navigation pulled Right
  .page-nav--right {
    float: right;
  }
}
