@import "../bootstrap/variables.scss";
@import "../helpers/gradient.scss";

/***************************************************************************************
* Navbar
***************************************************************************************/
.menu {
  margin-top: 10px;
}

.navbar-brand.logo {
  width: 100%;
  left: 0;
  right: 0;
  position: absolute;
  width: 194px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top:-10px;
  color: $cr-grey;

  .icon-logo {
    max-height: 24px;
  }

  @media (min-width: $screen-md-min) {
    width: 200px;
    margin-left: 0;
    margin-right: 0;
  }
}

// Navbar nav links
//
// Builds on top of the `.nav` components with it's own modifier class to make
// the nav the full height of the horizontal nav (above 768px).

.navbar-nav {
  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);

  > li > a {
    padding-top:    10px;
    padding-bottom: 10px;
    line-height: $line-height-computed;
  }

  @media (max-width: $screen-xs-max) {
    // Dropdowns get custom display when collapsed
    .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      box-shadow: none;

      > li > a,
      .dropdown-header {
        padding: 5px 15px 5px 25px;
      }
      > li > a {
        line-height: $line-height-computed;
        &:hover,
        &:focus {
          background-image: none;
        }
      }
    }
  }

  // Uncollapse the nav
  @media (min-width: $grid-float-breakpoint) {
    float: left;
    margin: 0;

    > li {
      float: left;
      > a {
        padding-top: (($navbar-height - $line-height-computed) / 2);
        padding-bottom: 0px; //CHANGE
      }
    }
  }
}

// Basic Styling
.overlay_container.show.overlay {
  height: 1000px;
  background: rgba(50, 50, 50, 0.5);
  height: 1000px;
  position: fixed;
  width: 100%;
}

header.show .container {
  padding-top: 10px;
  margin-top: -10px;
}

.list-unstyled {
  list-style: none;
}

.navbar-left{
  float: left;
}

.navbar-right {
  float: right;
  margin-left: 10px;
}

.remember, .forgot_password{
  display: inline;
  margin-bottom: 5px;
  font-weight: normal;
  color: $gray-light;
  font-size: smaller;
  line-height: 30px;

  input {
    margin-top: 0px;
  }
}

.forgot_password {
  float: right;
}

.nav-profile-title {
  margin-top: $line-height-computed/4;
}

.nav-profile-image-container {
  width: 36px;
  height: 36px;
  display: inline-block;
}

.nav-profile-image {
  background-color: transparent;
  border-radius: 50%;
  position: relative;

  @media (min-width: $screen-md-min) {
    width: 36px;
    height: 36px;
  }

  &:after {
    @extend .absolute-cover;
    display: block;
    content: "";
    border: 2px solid rgba(214, 224, 226, 0.8);
    border-radius: 50%;
  }
}
.btn-nav {
  min-height: 40px;
}

/******************** Mobile ********************/

.navbar-header{
  width: 100%;
  transform: translatex(0%);
  transition: all 0.563s;
  margin-top: 10px;
}

.navbar-header.show {
  position: fixed;
  z-index: 100000;
  margin-left: 10px;
  transform: translatex(73%);
  transition: all 0.5s;
  margin-top: 10px;
  .navbar-brand.logo {
    //width: 80%;
  }
  .navbar-brand.logo, .navbar--login {
    //opacity: 0;
  }
}

.nav__side--toggle {
  position: relative;
  padding: 6px;
  margin-bottom: 0px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
}

.nav__side--toggle .icon-bar {
  background-color: $cr-grey;
  width: 22px;
  height: 3px;
  display: block;
  margin: 3px 0px;
  box-shadow: inset 0 1px 10px rgba(0,0,0,0.1);
}
.mobile-search {
  .icon {
    color: $cr-grey;
  }
}

/* Sidebar nav */

.side-nav {
  position: fixed;
  z-index: 100000;
  height: 100%;
  background-color: #f9f9f9;
  padding-right: 0;
  padding-top: 10px;
  transform: translatex(-125%);
  transition: all 0.5s;
  .icon--small {
    transform: rotate(0deg);
  }

}

.side-nav.show {
  overflow: scroll;
  right: 17%;
  width: 75%;
  padding: 10px 0 0 0;
  box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.175);
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  transform: translatex(-11%);
  transition: all 0.5s;
}

.side-nav__dropdown {
  position: absolute;
  width: 100%;
  padding: 0;
  z-index: 10000;
  font-size: 14px;
  background: #eaeced;
  color: #323232;
  border-radius: 0px;
  border: none;
  position: relative;
  float: none;
}

.side-nav__subnav {
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  /*margin: -1px 0px 15px 0px;*/
  list-style: none;
  font-size: 14px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0px;
  background-clip: padding-box;
  width: 100%;
}

.side-nav__subnav__item-container, .navbar--login__container {
  float: none;
}

.side-nav__subnav--item .heading__item, .side-nav__subnav--item .heading__item:hover {
  text-transform: none;
}

.side-nav__subnav.collapse.in, .side-nav__subnav.collapsing {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.2);
  display: block;
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  border-radius: 0;
}
/*
.heading__title+.side-nav__subnav {
  transform: rotate(180deg);
}
*/

.heading__title, .nav .open > a.heading__title {
  color: #4c4c4c;
  display: block;
  padding: 17px 15px;
  background: #f9f9f9;
  box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.175);
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
}

.heading__item, .heading__item:hover {
  padding: 10px;
  text-transform: uppercase;
  color: #4c4c4c;
  background: none;
  line-height: 25px;
  width: 100%;
  display: block;
}

.mobile-account {
  float: right;
  padding: 3px 0 0;
  position: relative;
  z-index: 1001;
  color: $cr-grey;
}
/******************** Desktop ********************/

.navbar__dropdown {
  padding: 10px;
  display: block;
  margin-left: -8px;
}

.navbar__dropdown--subnav {
  top: -100000px;
  opacity: 0;
  position: absolute;
  display: block;
  width: auto;
  background-color: #fff;
  border: solid #cfcdcd 1px;
}

.navbar__dropdown--item{
  display: inline;
  &:hover {
    display: inline-block;
    > .navbar__dropdown--subnav {
      top: 125px;
      opacity: 1;
      padding: 0;
      position: absolute;
      transition: opacity .2s ease 0.1s, top .2s ease 0.1s;
      .heading__item {
        text-transform: none;
        color: #292929;
        padding: 0 5px;
        display: block;
        font-size: 12px;
        white-space: normal;
        font-weight: bold;
      }
    }
  }
}

.navbar__dropdown--subnav--item {
  display: inline-block;
  padding: 15px;
  vertical-align: top;
  &:first-child {
    background: #eee;
    max-width: 250px;
  }
}

.navbar__dropdown--item:hover > .navbar--heading__title {
  color: #fff;
  @include gradient(#7AA8C2, #4A81A0);

  &:after {
    content: "";
    display: block;
    position: absolute;
    left: 10px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-color: #7aa8c2 transparent transparent transparent;
    border-style: solid;
    border-width: 5px;
  }
}

.navbar--heading__title{
  display: inline-block;
  position: relative;
  margin-bottom: 50px;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.navbar__dropdown--subnav__list{
  padding: 0;
  width: auto;
  float: none;
}

.navbar__dropdown--subnav__list--item {
  margin: 0;
  padding: 5px 10px;
  border: none;
  background: none;
  display: block;
  width: auto;
  &:hover a {
    color: #b05c30;
    text-decoration: underline;
  }
  &:before {
    content:">";
    color: #bbb;
  }
}

.navbar--login {
  .dropdown-menu {
    left: calc(100% - 315px);
    width: 300px;
  }
}

.navbar--login__submit--label {
  text-transform: lowercase;
}

.navbar--login__button {
  padding: 0;
}

.navbar--login__dropdown  {
  @extend .dropdown-menu;
  top: 80%;
}
.navbar--login__dropdown.toggleOpen {
  top: 85%;
  display: block;
}

.navbar--login__input {
  margin-bottom: 12px;
  width: 100%;
  position: relative;
}

.btn.navbar--login__submit {
  color: #fff;
  @include gradient(#7AA8C2, #4A81A0);
}


.nav-icon__container {
  position: absolute;
  right: 5px;
  top: 10px;
}

.current-user-name {
  display: block;
  float: left;
  padding-right: 6px;
  line-height: 1.5;
}

/***** Mobile Nav *****/

@media (max-width: $screen-md) {
  .side-nav__subnav__item-container, .navbar--login__container {
    margin-top: 15px;
  }
}

/***************************************************************************************
* Crossroads Bootstrap Nav Elements
***************************************************************************************/

ul.cr-nav {
  margin-left: 14px;
  margin-right: 14px;
  > li {
    > a {
      display: inline-block;
      position: relative;
      padding: 6px 14px; //same size as normal .btn
      border-radius: 4px;
      border: 1px solid transparent;
      color: $cr-grey;
      font-size: 18px;
      &:hover, &:active, &.focus {
        color: #fff;
        background: $brand-primary;
        border: 1px solid transparent;
      }

      &.btn {
        vertical-align: sub;
        padding-bottom: 2px;
      }
    }

    &.open {
      > a {
        color: #fff !important;
        background: $brand-primary !important;
        border: 1px solid transparent;

        &:focus {
          border: 1px solid transparent;
        }
      }
    }

    &.active {
      a {
        //Tate - do we want active to look like hover?
        //color: #fff;
        //background: $brand-primary;
        color: $brand-primary;
        background: transparent;
        border: 1px solid transparent;
      }
    }
  }
}

/***************************************************************************************
* Mega Menu
***************************************************************************************/

.dropdown-large {
  position: static !important;
}

.dropdown-menu-large {
  margin-left: 8px;
  margin-right: 8px;
  padding: 20px 0px;
  right: 0%;
  top: 40px;
}

.dropdown-menu-large > li > ul {
  padding: 0;
  margin: 0;
}

.dropdown-menu-large {

  &.dropdown-menu-featured-row {
    &:before {
    @include make-sm-column(3);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: $gray-lighter;
    content: "";
    }
  }

  a.white {
    background: white;

    &:hover,
    &:focus {
      background: white;
    }
  }

  a.navimg {
    &:hover,
    &:focus {
      background: transparent;
    }
  }

  > li {

    > ul {
      > li {
        list-style: none;

        a {
          display: block;
          padding: 3px 20px;
          clear: both;
          font-weight: normal;
          line-height: 1.428571429;
          color: $gray-dark;
          white-space: normal;

          &:hover,
          &:focus {
            text-decoration: none;
            background-color: #f5f5f5;
          }
        }
      }
    }
  }
}



.dropdown-menu-large {
  .dropdown-header {
    //color: $brand-primary;
    color: $gray-darker;
    font-size: 15px;
    font-weight: bold;
  }

  .disabled {
    a,
    > a:hover,
    > a:focus {
      color: #999999;
    }

    a:hover,
    a:focus {
      text-decoration: none;
      background-color: transparent;
      background-image: none;
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
      cursor: not-allowed;
    }
  }
}

@media (max-width: 768px) {
  .dropdown-menu-large {
    margin-left: 0 ;
    margin-right: 0 ;
  }
  .dropdown-menu-large > li {
    margin-bottom: 30px;
  }
  .dropdown-menu-large > li:last-child {
    margin-bottom: 0;
  }
  .dropdown-menu-large .dropdown-header {
    padding: 3px 15px !important;
  }
}


/***************************************************************************************
* Off Canvas Mobile Menu
***************************************************************************************/
.ng-aside.modal.fade .modal-dialog,
.ng-aside .modal-dialog {
  max-width: 80%;
  padding: 0px;
  @include translate(0, 0);

  .modal-content {
    background: $gray-darker;
    padding-top: 0px;
    padding-bottom: 10px;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      margin: 0;
      padding: 0px;
      display: block;

      > a {
        margin: 0;
        padding: 17px 25px 17px 15px;
        border-bottom: 1px solid lighten($gray-darker, 10%);
        display: block;
        text-decoration: none;
        box-shadow: inset -7px 0 9px -7px rgba(0, 0, 0, 0.175);
        text-transform: uppercase;
        color: $gray-light;

        &:hover {
          color: $gray-lighter;
          background: lighten($gray-darker, 3%);
        }
      }
      svg.icon-arrow-right9 {
        float: right;
        margin-top: 20px;
        fill: $gray-light;
        margin-right: 10px;
        transition-property: transform;
        transition-duration: .25s;
      }
    }
    li.dropdown.open {
      //styles for open menu
      svg.icon-arrow-right9 {
        transform: rotate(90deg);
        fill: $gray-lighter;
      }
    }
  }

  ul.drop-menu {
    position: relative;
    float: none;
    border-radius: 0px;
    border: 0px;
    background: lighten($gray-darker, 8%);
    box-shadow: none;
    display: block;
    overflow: hidden;

    li {

      &:first-child {
        > a {
          box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.175);
        }
      }

      > a {
        border-bottom: 1px solid lighten($gray-darker, 15%);
        text-transform: none;

        &:hover {
          background: lighten($gray-darker, 10%);
        }
      }
    }
  }

  .side-nav-not-logged-in {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid lighten($gray-darker, 15%);

    a {
      color: $gray-light;

      &:hover {
        color: $gray-lighter;
      }
    }
  }

  .side-nav-login {
    padding: 10px;

    input {
      position: static;
    }
  }
}

/***************************************************************************************
* Local Navigation
***************************************************************************************/

.local-nav {
  list-style-type: none;
  padding: 0;
  li {
    display: inline;
    margin-right: 10px;
    padding: 10px;
    &.active {
      border-bottom: 3px solid $brand-secondary;
      color: $brand-secondary;
    }
  }
}