//
// Nav
//
%nav-active-hover {
  border-color: rgba(120, 130, 140, .13);
  border-bottom-color: transparent;
}

.nav {
  &, &-item, &-link {
    border: inherit;
  }
  //nav-link
  &-link {
    position: relative;

    .nav-md & {
      padding: .5rem 1rem;
    }

    .nav-sm & {
      padding: .25rem .75rem;
    }

    .nav-xs & {
      padding: .15rem .5rem;
      font-size: 90%;
    }

    .nav-rounded & {
      border-radius: 2rem;
    }

  }

  //nav-tabs
  &-tabs {
    border-bottom-width: 0;
    position: relative;
    z-index: 1;

    .nav-link {
      background: 0 0 !important;
      color: inherit !important;
      &.active {
        &, &:focus, &:hover {
          @extend %nav-active-hover
        }
      }
      &:focus, &:hover {
        @extend %nav-active-hover
      }
    }
  }

  //nav-item
  &-item {
    .nav-justified & {
      display: table-cell;
      width: 1%;
      float: none!important;
      text-align: center
    }

    .nav-lists & {
      border-bottom: 1px solid rgba(120,130,140,.13);
      background-clip: padding-box;
    }
  }

  //nav-active-border
  &-active-border {
    .nav-link {
      &:before {
        content: '';
        position: absolute;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        left: 50%;
        right: 50%;
        bottom: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: transparent
      }

      &.active:before,&:focus:before,:hover:before{
        left: 0;
        right: 0;
        border-bottom-color: inherit;
      }

      &.top{
        .nav-link:before {
          bottom: auto;
          top: 0;
        }
      }

      &.left {
        .nav-link {
          float: none;
          &:before {
            border-bottom-width: 0;
            right: auto;
            border-left-width: 3px;
            border-left-style: solid;
            border-left-color: transparent;
            left: 0;
            top: 50%;
            bottom: 50%;
          }

          &.active:before,&:focus:before,&:hover:before{
            top: 0;
            bottom: 0;
            border-left-color: inherit;
          }
        }

        &right {
          .nav-link:before {
            left: auto;
            right: 0
          }
        }
      }


    }
  }

  //navside
  &side{
    &,.nav{
      border: inherit;
    }

    [data-flex],[flex] {
      overflow: auto;
    }

    .nav{
      li {
        border: inherit;
        position: relative;

        li {
          a {
            line-height: 1.75rem;
            padding-left: 4rem;
            .nav-text {
              padding: .3125rem 0;
            }
          }
          li{
            a {
              padding-left: 5rem;
            }

            li{
              a {
                padding-left: 6rem;
              }
            }
          }
        }
        a{
          display: block;
          position: relative;

          &:after {
            display: table;
            clear: both
          }
          &:focus,&:hover{
            background-color: rgba(255,255,255,.065);
          }
        }

        &.active>a{
          background-color: transparent;
          .nav-caret i {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg)
          }
        }
      }

    }

    .nav li a,.nav-header {
      padding: 0 1rem;
      line-height: 2rem
    }

    .nav-header {
      span{
        opacity: .4;
      }
      &:focus,&:hover{
        background-color: transparent!important;
      }
      &:after {
        display: none
      }
    }

    .navbar-brand {
      float: none;
      margin-right: 0
    }

    .nav-text {
      opacity: .65
    }

    .active>a>.nav-text,a:focus>.nav-text,a:hover>.nav-text{
      opacity: 1;
    }

  }

  //nav-icon
  &-icon {
    float: left;
    margin-right: 1rem;
    top: 0;
    width: 2rem;
    border-radius: 100%;
    display: inline-block;

    i {
      position: relative;
      line-height: 1;

      img,svg {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%
      }
    }

    .navside & {
      opacity: .35;
    }

    &.no-fade {
      opacity: 1!important;
    }

    .navside .active>a> &,.navside a:focus> &,.navside a:hover> &{
      opacity: 1;
    }

    .navbar & {
      margin-right: .5rem;
    }

  }

  //nav-label
  &-label {
    float: right;
    margin-left: 1rem;
    font-style: normal;
    z-index: 1;

    .navbar & {
      margin-left: .5rem;
    }

    .label {
      vertical-align: 1px
    }
  }

  //nav-caret
  &-caret {
    float: right;
    margin-left: 1rem;
    opacity: .45;

    i {
      -webkit-transition: transform .3s ease-in-out;
      transition: transform .3s ease-in-out
    }

    .navbar & {
      margin-left: .5rem;
    }
  }

  //nav-sub
  &-sub {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .4s ease 0s;
    transition: max-height .4s ease 0s;
    .active> & {
      max-height: 50rem;
    }
  }

  //nav-border
  &-border {
    .nav>li.active:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      border-left-color: inherit;
      border-left-width: 3px;
      border-left-style: solid
    }
  }

  //nav-color
  &-color {
    .nav>li {
      &>a{
        &>* {
          position: relative
        }
        &:before {
          content: '';
          position: absolute;
          z-index: 0;
          left: 1rem;
          width: 2rem;
          height: 100%;
          border: 1rem solid transparent;
          -webkit-transition: width .4s ease 0s;
          transition: width .4s ease 0s
        }
      }

      &.active>a:before {
        width: 100%;
        left: 0;
        right: 0;
      }
    }
  }

  //nav-stacked
  &-stacked{
    .nav>li {
      &:not(.nav-header) {
        padding: .15rem .5rem;
      }
      &>a {
        line-height: 1.75rem;
        padding: 0 .5rem;

        .nav-icon {
          width: 1.75rem;
        }

        .nav-text {
          padding: .3125rem 0;
        }

        &:before {
          left: .5rem;
          border-radius: 3px;
          width: 1.75rem;
          border-width: .875rem;
        }
      }

      li {
        a {
          padding-left: 3.25rem;
        }

        li {
          a {
            padding-left: 4.25rem;
          }

          li {
            a {
              padding-left: 5.25rem;
            }
          }
        }
      }
    }

    .nav li a {
      border-radius: 3px
    }

    &.nav-stacked-rounded .nav{
      &>li>a{
        &,&:before{
          border-radius: 500px;
        }
      }

      li li a,li.active{
        background: 0 0;
      }
    }

  }

  //nav-center
  &-center{
    .nav-icon {
      display: none;
    }

    .nav-caret {
      position: absolute;
      right: 10px
    }

    .nav-label {
      position: absolute;
      padding-left: 10px
    }

    .nav a {
      padding-left: 16px!important
    }

    .nav-fold .pull-left {
      float: none!important;
      margin-bottom: 10px;
      display: inline-block
    }
  }
}

//media 992
@media (min-width:map-get($media-min-breakpoints,'lg')) {
  //.folded
  .folded{
    .nav>li>a,.navbar {
      padding-left: 4px;
      padding-right: 4px;
    }

    &,.scroll {
      width: 4.5rem;
    }

    &.md{
      &,.scroll{
        width: 5.5rem;
      }
    }

    .hidden-folded,.nav li ul{
      display: none;
    }

    .nav>li>a {
      text-align: center;
      .nav-caret,.nav-text {
        display: none;
        padding-left: 4px;
        padding-right: 4px;
      }

      .nav-label {
        position: absolute;
        top: -6px;
        right: 6px
      }

      .nav-icon {
        float: none;
        line-height: 2.5rem;
        margin: 0;
        position: relative;
        width: 2.5rem
      }

      &:before {
        left: 0
      }
    }

    .nav li.active {
      background: 0 0
    }

    &.show-text .nav>li>a .nav-text {
      display: block;
      margin-top: -18px;
      font-size: .85em
    }

    .navbar {
      text-align: center
    }

    .navbar-brand {
      float: none;
      margin: 0
    }

    .nav-fold {
      padding: 8px 16px;
      .pull-left {
        float: none!important;
        margin: 0;
        display: block;
        text-align: center;
        img {
          margin: 0 auto
        }
      }
    }

    .nav-stacked-rounded .nav>li>a {
      width: 2.5rem;
      margin: 0 auto;
      padding: 0;
      .nav-icon {
        width: 2.5rem
      }
    }

    .nav-color .nav>li>a:before {
      width: 100%;
      border-width: 1.25rem;
      background-image: linear-gradient(to right bottom,transparent,rgba(0,0,0,.15))
    }

    &.nav-expand {
      @include generate-browser-prefix(transition,width .4s cubic-bezier(.25,.8,.25,1));
      @include generate-browser-prefix(backface-visibility,hidden);
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;

      &.active,&.active .scroll,&:focus,&:focus .scroll,&:hover,&:hover .scroll{
        width: 12.5rem!important;
      }

      &.active,&:focus,&:hover{
        &>*{
          width: 12.5rem;
        }

        .hidden-folded{
          display: block;

          &.inline{
            display: inline-block;
          }
        }

        .nav li ul{
          display: inherit;
        }

        .nav>li>a {
          width: auto!important;
          margin: 0!important;
          text-align: left;
          padding-left: 1rem;
          padding-right: 1rem;

          .nav-text {
            font-size: 1em;
            margin: 0
          }

          .nav-label {
            position: static;
          }

          .nav-icon {
            float: left;
            width: 2rem;
            line-height: 2rem;
            margin-left: 0;
            margin-right: 1rem
          }
        }

        .navbar {
          text-align: left;
          padding-left: 1rem;
          padding-right: 1rem;
        }

        .nav-color{
          .nav>li>a:before {
            width: 2rem;
            left: 1rem;
            border-width: 1rem;
          }

          .nav>li.active>a:before {
            width: 100%;
            left: 0;
          }
        }

        .nav-stacked{
          .nav>li>a {
            padding: 0 .5rem;
          }
          &:before {
            left: .5rem;
            width: 1.75rem;
            border-width: .875rem;
          }
          .nav-icon {
            width: 1.75rem;
            line-height: 1.75rem;
          }
        }

        .nav-fold {
          padding: 12px 16px;
          .pull-left {
            float: left!important;
            img {
              height: auto;
              &.w-40 {
                width: 40px;
              }
              &.w-48 {
                width: 48px;
              }
            }
          }
        }
      }
    }

  }

  .folded.nav-dropdown,
  .nav-dropup{
    .nav>li>ul {
      display: none;
      overflow: visible;
      max-height: 999px;
      color: rgba(255,255,255,.87);
      background-color: #16202f;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,.15);
      position: absolute;
      left: 100%;
      top: 0;
      padding: 6px 0;
      a {
        padding-left: 16px!important;
        padding-right: 16px!important;
        min-width: 160px;
      }
      li.active ul {
        display: block;
      }
      .nav-text {
        padding: 6px 0!important
      }
    }

    .nav>li .nav-mega {
      width: 320px;
      &>li {
        width: 160px;
        float: left;
      }
      &.nav-mega-3 {
        width: 480px;
      }
    }
  }
  .folded.nav-dropdown .nav>li:focus>ul,
  .folded.nav-dropdown .nav>li:hover>ul,
  .folded.nav-expand.active .nav>li>a .nav-caret,
  .folded.nav-expand.active .nav>li>a .nav-text,
  .folded.nav-expand:focus .nav>li>a .nav-caret,
  .folded.nav-expand:focus .nav>li>a .nav-text,
  .folded.nav-expand:hover .nav>li>a .nav-caret,
  .folded.nav-expand:hover .nav>li>a .nav-text,
  .nav-dropup .nav>li:focus>ul,
  .nav-dropup .nav>li:hover>ul {
    display: block
  }


  .folded.nav-dropdown,.folded.nav-dropdown .row-body,
  .folded.nav-dropdown [data-flex],
  .folded.nav-dropdown [flex],
  .folded.nav-dropdown>*,.nav-dropup,
  .nav-dropup .row-body,.nav-dropup [data-flex],
  .nav-dropup [flex],.nav-dropup>* {
    overflow: visible!important
  }
}

.nav-link.active,
.nav>li.active>a{
  @each $key, $val in $nav-active-status-palette {
    $key: quote("#{$key}");
    .nav-active-#{$key} & {
      @include color-bgcolor-set(nth($val,1), nth($val,2))
    }
  }
}

.nav-md .nav-item + .nav-item {
  margin-left: 1.5rem
}

.tab-content.tab-alt .tab-pane {
  display: block;
  height: 0;
  overflow: hidden
}

.tab-content.tab-alt .tab-pane.active {
  height: auto;
  overflow: visible
}
.nav-fold {
  padding: .75rem 1rem
}

.nav-text {
  line-height: 1.125rem;
  padding: .4375rem 0
}
.nav-text,.nav-text small,.nav-text span {
  display: block
}

.navbar .nav-text {
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  padding: 0
}

.navbar .nav-text span.text-xs {
  margin-top: .25rem
}

.nav-color .nav>li>a[class*=b-]:before,
.nav-color .nav>li>a[class*=" b-"]:before,
.ui-icon:after {
  border-color: inherit
}

.nav-light .nav .nav-icon i img,
.nav-light .nav .nav-icon i svg {
  display: block
}