/* ----------------------------------------------- */
/* ############### 3.10 Navigation ############### */
/* ----------------------------------------------- */

// Nav
.nav-tabs-for-dark {
  .nav-link {
    color: rgba(#fff, .8);
    &.active { border-color: transparent; }

    &:hover,
    &:focus { color: #fff; }
  }
}

// Nav Styles
// Best to use for dropdown menu
.nav-style-1 {
  .nav-link {
    color: $gray-600;
    font-size: 13px;
    display: block;
    @include border-radius(2px);

    &:hover,
    &:focus {
      background-color: $gray-200;
      color: $gray-700;
    }
  }

  i {
    display: inline-block;
    width: 20px;
    font-size: 20px;
    margin-right: 7px;
    vertical-align: middle;
    line-height: 14px;
  }
}

.nav-style-2 {
  .nav-link {
    color: $gray-600;
    font-size: 13px;
    display: block;
    position: relative;
    @include transition($transition-base);

    + .nav-link { border-top: 1px solid $gray-200; }
    &:first-child { @include border-top-radius(2px); }
    &:last-child { @include border-bottom-radius(2px); }

    &::before {
      content: '';
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: 0;
      border-left: 3px solid theme-color('info');
      opacity: 0;
      @include transition($transition-base);
    }

    &:hover,
    &:focus {
      color: $gray-700;
      i { color: theme-color('info'); }

      &::before { opacity: 1; }
    }

    &.active {
      &,
      &:hover,
      &:focus {
        color: $gray-700;
        i { color: theme-color('info'); }

        &::before { opacity: 1; }
      }
    }
  }

  i {
    display: inline-block;
    width: 20px;
    font-size: 20px;
    margin-right: 7px;
    vertical-align: middle;
    line-height: 14px;
    color: $gray-500;
    @include transition($transition-base);
  }
}


// Nav Tabs Style
.nav-tabs-style-1 {
  background-color: $gray-200;
  border: 0;

  .nav-link {
    border: 0;
    color: $gray-600;
    @include border-radius(0);

    &:first-child { border-top-left-radius: 2px; }
    &:last-child { border-top-right-radius: 2px; }

    &.active {
      background-color: #fff;
      color: $gray-800;
    }
  }
}


// Nav Custom Color
.nav-gray-600 { @include nav-color-variant($gray-600, $gray-800); }
.nav-gray-700 { @include nav-color-variant($gray-700, $gray-900); }
.nav-white-800 { @include nav-color-variant(rgba(#fff, .8), #fff); }

.nav-pills { @include nav-color-variant($gray-700, $gray-800, #fff, transparent, theme-color('info')); }
.nav-pills-for-dark { @include nav-color-variant(rgba(#fff,.7), #fff, #fff, transparent, theme-color('info')); }

.nav.active-primary .nav-link.active { color: theme-color('primary'); }
.nav.active-success .nav-link.active { color: theme-color('success'); }
.nav.active-warning .nav-link.active { color: theme-color('warning'); }
.nav.active-danger .nav-link.active { color: theme-color('danger'); }
.nav.active-info .nav-link.active { color: theme-color('info'); }
.nav.active-indigo .nav-link.active { color: $indigo; }
.nav.active-purple .nav-link.active { color: $purple; }
.nav.active-pink .nav-link.active { color: $pink; }
.nav.active-teal .nav-link.active { color: $teal; }
.nav.active-orange .nav-link.active { color: $orange; }

// Advanced Navigation
.nav-outline {
  height: 100%;

  .nav-item { height: 100%; }

  .nav-link {
    color: $gray-600;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      border-left: 3px solid $gray-800;
      opacity: 0;
      @include transition($transition-base);
    }

    &:hover,
    &:focus { color: $gray-800; }

    &.active {
      &,&:hover,&:focus {
        color: $gray-800;
        &::before { opacity: 1; }
      }
    }
  }

  &.flex-row,
  &.flex-xs-row,
  &.flex-sm-row,
  &.flex-md-row,
  &.flex-lg-row,
  &.flex-xl-row {
    .nav-item {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .nav-link {
      padding-left: 0;
      padding-right: 0;

      &::before {
        border-left: 0;
        right: 0;
        border-bottom: 3px solid $gray-800;
      }
    }
  }

  // nav for dark
  &.nav-outline-for-dark { @include nav-outline-variant(rgba(#fff,.8), #fff); }

  // active color variant
  &.active-primary  { @include nav-outline-active-variant(theme-color('primary')); }
  &.active-success  { @include nav-outline-active-variant(theme-color('success')); }
  &.active-warning  { @include nav-outline-active-variant(theme-color('warning')); }
  &.active-danger   { @include nav-outline-active-variant(theme-color('danger')); }
  &.active-info     { @include nav-outline-active-variant(theme-color('info')); }
  &.active-orange   { @include nav-outline-active-variant($orange); }
  &.active-indigo   { @include nav-outline-active-variant($indigo); }
  &.active-purple   { @include nav-outline-active-variant($purple); }
  &.active-pink     { @include nav-outline-active-variant($pink); }
  &.active-teal     { @include nav-outline-active-variant($teal); }
}


// Navigation Effects
.nav-effect-1 {
  height: 100%;
  align-items: center;

  .nav-item {
    height: 100%;
    margin: 0 5px;
  }

  .nav-link {
    height: 100%;
    position: relative;
  	display: flex;
    align-items: center;
  	text-align: center;
  	color: $gray-600;
  	-webkit-transition: color 0.4s;
  	transition: color 0.4s;

    &:hover,
    &:focus { color: $gray-800; }

    &::before,
    &::after {
      content: '';
    	position: absolute;
    	left: 0;
    	width: 100%;
    	height: 2px;
    	background: theme-color('info');
    	-webkit-transform: scale3d(0, 1, 1);
    	transform: scale3d(0, 1, 1);
    	-webkit-transition: -webkit-transform 0.2s;
    	transition: transform 0.2s;
    }

    &::before {
    	top: 0;
    	-webkit-transform-origin: 0 50%;
    	transform-origin: 0 50%;
    }

    &::after {
    	bottom: 0;
    	-webkit-transform-origin: 100% 50%;
    	transform-origin: 100% 50%;
    }

    &.active {
      color: theme-color('info');

      &::before,
      &::after {
        -webkit-transform: scale3d(1, 1, 1);
      	transform: scale3d(1, 1, 1);
      	-webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
      	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
      	-webkit-transition-duration: 0.4s;
      	transition-duration: 0.4s;
      }
    }
  }
}

.nav-effect-2 {
  height: 100%;
  align-items: center;

  .nav-item {
    height: 100%;
    margin: 0 5px;
  }

  .nav-link {
    height: 100%;
    position: relative;
  	display: flex;
    align-items: center;
  	text-align: center;
  	color: $gray-600;
  	-webkit-transition: color 0.3s;
  	transition: color 0.3s;

    &::before {
      content: '';
    	position: absolute;
    	bottom: 0;
    	left: 1rem;
      right: 1rem;
    	height: 4px;
    	background: theme-color('info');
    	-webkit-transform: scale3d(0, 1, 1);
    	transform: scale3d(0, 1, 1);
    	-webkit-transition: -webkit-transform 0.1s;
    	transition: transform 0.1s;
    }

    &:hover,
    &:focus {
      color: $gray-200;
    }

    &.active {
      color: theme-color('info');

      &::before {
        -webkit-transform: scale3d(1, 1, 1);
      	transform: scale3d(1, 1, 1);
      	-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      	-webkit-transition-duration: 0.3s;
      	transition-duration: 0.3s;
      }
    }
  }
}

.nav-effect-3 {
  .nav-item::before,
  .nav-item::after,
  .nav-link::before,
  .nav-link::after {
  	content: '';
  	position: absolute;
  	background: $pink;
  	-webkit-transition: -webkit-transform 0.2s;
  	transition: transform 0.2s;
  }

  .nav-item {
    margin: 0 5px;
    position: relative;

    &.current .nav-link {
      color: $pink;
    }

    &::before,
    &::after {
      top: 0;
    	width: 2px;
    	height: 100%;
    	-webkit-transform: scale3d(1, 0, 1);
    	transform: scale3d(1, 0, 1);
    }

    &::before {
      left: 0;
    	-webkit-transform-origin: 50% 100%;
    	transform-origin: 50% 100%;
    }

    &::after {
      right: 0;
    	-webkit-transform-origin: 50% 0%;
    	transform-origin: 50% 0%;
    }
  }

  .nav-link {
    position: relative;
  	display: block;
  	text-align: center;
  	color: $gray-600;
  	-webkit-transition: color 0.4s;
  	transition: color 0.4s;

    &:hover,
    &:focus { color: $gray-800; }

    &::before,
    &::after {
      left: 0;
    	width: 100%;
    	height: 2px;
    	-webkit-transform: scale3d(0, 1, 1);
    	transform: scale3d(0, 1, 1);
    }

    &::before {
      top: 0;
    	-webkit-transform-origin: 0 50%;
    	transform-origin: 0 50%;
    }

    &::after {
      bottom: 0;
    	-webkit-transform-origin: 100% 50%;
    	transform-origin: 100% 50%;
    }
  }

  .current {
    &::before,
    &::after,
    .nav-link::before,
    .nav-link::after {
      -webkit-transform: scale3d(1, 1, 1);
    	transform: scale3d(1, 1, 1);
    	-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    	-webkit-transition-duration: 0.4s;
    	transition-duration: 0.4s;
    }
  }
}

.nav-effect-4 {
  .nav-item {
    margin: 0 5px;
  }

  .nav-link {
    position: relative;
  	display: block;
  	width: 100px;
  	color: $gray-500;
  	-webkit-transition: color 0.2s;
  	transition: color 0.2s;

    &:hover,
    &:focus { color: #fff; }

    &::before,
    &::after {
      content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	border: 2px solid theme-color('warning');
    	-webkit-transition: -webkit-transform 0.2s;
    	transition: transform 0.2s;
    }

    &::before {
      border-width: 0 2px;
    	-webkit-transform: scale3d(1, 0, 1);
    	transform: scale3d(1, 0, 1);
    	-webkit-transform-origin: 0% 50%;
    	transform-origin: 0% 50%;
    }

    &::after {
      border-width: 2px 0;
    	-webkit-transform: scale3d(0, 1, 1);
    	transform: scale3d(0, 1, 1);
    	-webkit-transform-origin: 0% 0%;
    	transform-origin: 0% 0%;
    	-webkit-transition-delay: 0.2s;
    	transition-delay: 0.2s;
    }

    &.active {
      color: theme-color('warning');

      &::before,
      &::after {
        -webkit-transform: scale3d(1, 1, 1);
      	transform: scale3d(1, 1, 1);
      }
    }
  }
}

.nav-effect-5 {
  align-items: center;

  .nav-link {
    &::before,
    &::after {
      display: inline-block;
    	opacity: 0;
    	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
    	transition: transform 0.3s, opacity 0.2s;
    }

    &::before {
      margin-right: 10px;
    	content: '[';
    	-webkit-transform: translateX(20px);
    	-moz-transform: translateX(20px);
    	transform: translateX(20px);
    }

    &::after {
      margin-left: 10px;
    	content: ']';
    	-webkit-transform: translateX(-20px);
    	-moz-transform: translateX(-20px);
    	transform: translateX(-20px);
    }

    &:hover,
    &:focus {
      &::before,
      &::after {
        opacity: 1;
      	-webkit-transform: translateX(0px);
      	-moz-transform: translateX(0px);
      	transform: translateX(0px);
      }
    }

    &.active {
      &,&:hover,&:focus {
        &::before,
        &::after {
          opacity: 1;
        	-webkit-transform: translateX(0px);
        	-moz-transform: translateX(0px);
        	transform: translateX(0px);
        }
      }
    }
  }
}


.nav-effect-6 {
  align-items: center;

  .nav-item { margin: 0; }
  .nav-link {
    color: #fff;
    padding-left: 0;
    padding-right: 0;
  	line-height: 44px;
  	perspective: 1000px;

    span {
    	position: relative;
    	display: inline-block;
    	padding: 0 30px;
    	background-color: theme-color('info');
    	transition: transform 0.3s;
    	transform-origin: 50% 0;
    	-moz-transform-style: preserve-3d;
    	transform-style: preserve-3d;

      &::before {
      	position: absolute;
      	top: 100%;
      	left: 0;
      	width: 100%;
      	height: 100%;
      	background-color: #0965a0;
      	content: attr(data-hover);
      	transition: background-color 0.3s;
      	transform: rotateX(-90deg);
      	transform-origin: 50% 0;
        text-align: center;
      }
    }

    &:hover,
    &:focus {
      span {
        -webkit-transform: rotateX(90deg) translateY(-22px);
      	-moz-transform: rotateX(90deg) translateY(-22px);
      	transform: rotateX(90deg) translateY(-22px);

        &::before { background-color: theme-color('primary');	}
      }
    }

    &.active {
      &,&:hover,&:focus {
        span {
          -webkit-transform: rotateX(90deg) translateY(-22px);
        	-moz-transform: rotateX(90deg) translateY(-22px);
        	transform: rotateX(90deg) translateY(-22px);

          &::before { background-color: theme-color('primary');	}
        }
      }
    }
  }
}

.nav-effect-7 {
  align-items: center;

  .nav-item {
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav-link {
    position: relative;
    padding: 10px;
  	color: $gray-600;
  	font-weight: 700;
  	text-shadow: none;
  	-webkit-transition: color 0.3s;
  	-moz-transition: color 0.3s;
  	transition: color 0.3s;

    &::before,
    &::after {
      position: absolute;
    	left: 0;
    	width: 100%;
    	height: 2px;
    	background-color: theme-color('danger');
    	content: '';
    	opacity: 0;
    	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
    	transition: opacity 0.3s, transform 0.3s;
    	-webkit-transform: translateY(-10px);
    	-moz-transform: translateY(-10px);
    	transform: translateY(-10px);
    }

    &::before {
    	top: 0;
    	-webkit-transform: translateY(-10px);
    	-moz-transform: translateY(-10px);
    	transform: translateY(-10px);
    }

    &::after {
    	bottom: 0;
    	-webkit-transform: translateY(10px);
    	-moz-transform: translateY(10px);
    	transform: translateY(10px);
    }

    &:hover,
    &:focus {
      color: theme-color('danger');

      &::before,
      &::after {
        opacity: 1;
      	-webkit-transform: translateY(0px);
      	-moz-transform: translateY(0px);
      	transform: translateY(0px);
      }
    }
  }
}

.nav-effect-8 {
  align-items:  center;

  .nav-item {
    padding-left: 15px;
    padding-right: 15px;

    + .nav-item { margin-top: 25px; }
  }

  &.flex-md-row {
    .nav-item + .nav-item {
      @include media-breakpoint-up(md) {
        margin-top: 0;
      }
    }
  }

  .nav-link {
    position: relative;
    overflow: hidden;
  	padding: 0 5px;
  	height: 20px;
    color: rgba(#fff, .75);

    span {
      position: relative;
    	display: inline-block;
    	-webkit-transition: -webkit-transform 0.3s;
    	-moz-transition: -moz-transform 0.3s;
    	transition: transform 0.3s;

      &::before {
      	position: absolute;
      	top: 100%;
      	content: attr(data-hover);
      	font-weight: 700;
      	-webkit-transform: translate3d(0,0,0);
      	-moz-transform: translate3d(0,0,0);
      	transform: translate3d(0,0,0);
        color: theme-color('success');
      }
    }

    &:hover,
    &:focus {
      span {
        -webkit-transform: translateY(-100%);
      	-moz-transform: translateY(-100%);
      	transform: translateY(-100%);
      }
    }
  }
}

/* ########## RTL SUPPORT ########## */
.rtl {
  .nav { padding-right: 0; }

  .nav-style-1,
  .nav-style-2 {
    text-align: right;
    i {
      margin-right: 0;
      margin-left: 7px;
    }
  }

  .nav-effect-5 {
    .nav-link {
      &::before {
        margin-left: 10px;
        margin-right: 0;
      	-webkit-transform: translateX(-20px);
      	-moz-transform: translateX(-20px);
      	transform: translateX(-20px);
      }

      &::after {
        margin-right: 10px;
        margin-left: 0;
      	-webkit-transform: translateX(20px);
      	-moz-transform: translateX(20px);
      	transform: translateX(20px);
      }

      &:hover,
      &:focus {
        &::before,
        &::after {
          opacity: 1;
        	-webkit-transform: translateX(0px);
        	-moz-transform: translateX(0px);
        	transform: translateX(0px);
        }
      }

      &.active {
        &,&:hover,&:focus {
          &::before,
          &::after {
            opacity: 1;
          	-webkit-transform: translateX(0px);
          	-moz-transform: translateX(0px);
          	transform: translateX(0px);
          }
        }
      }
    }
  }

}
