// Base class // // Kickstart any navigation component with a set of style resets. Works with // `<nav>`s or `<ul>`s.

.nav {

padding-left: 0;
margin-bottom: 0;
list-style: none;

}

.nav-link {

display: inline-block;

@include hover-focus {
  text-decoration: none;
}

// Disabled state lightens text and removes hover/tab effects
&.disabled {
  color: $nav-disabled-link-color;

  @include plain-hover-focus {
    color: $nav-disabled-link-hover-color;
    cursor: $cursor-disabled;
    background-color: $nav-disabled-link-hover-bg;
  }
}

}

// Nav inline

.nav-inline {

.nav-item {
  display: inline-block;
}

.nav-item + .nav-item,
.nav-link + .nav-link {
  margin-left: $nav-item-inline-spacer;
}

}

// // Tabs //

.nav-tabs {

border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@include clearfix();

.nav-item {
  float: left;
  // Make the list-items overlay the bottom border
  margin-bottom: -$nav-tabs-border-width;

  + .nav-item {
    margin-left: $nav-item-margin;
  }
}

.nav-link {
  display: block;
  padding: $nav-link-padding;
  border: $nav-tabs-border-width solid transparent;
  @include border-top-radius($nav-tabs-border-radius);

  @include hover-focus {
    border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
  }

  &.disabled {
    @include plain-hover-focus {
      color: $nav-disabled-link-color;
      background-color: transparent;
      border-color: transparent;
    }
  }
}

.nav-link.active,
.nav-item.open .nav-link {
  @include plain-hover-focus {
    color: $nav-tabs-active-link-hover-color;
    background-color: $nav-tabs-active-link-hover-bg;
    border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
  }
}

.dropdown-menu {
  // Make dropdown border overlap tab border
  margin-top: -$nav-tabs-border-width;
  // Remove the top rounded corners here since there is a hard edge above the menu
  @include border-top-radius(0);
}

}

// // Pills //

.nav-pills {

@include clearfix();

.nav-item {
  float: left;

  + .nav-item {
    margin-left: $nav-item-margin;
  }
}

.nav-link {
  display: block;
  padding: $nav-link-padding;
  @include border-radius($nav-pills-border-radius);
}

.nav-link.active,
.nav-item.open .nav-link {
  @include plain-hover-focus {
    color: $nav-pills-active-link-color;
    cursor: default;
    background-color: $nav-pills-active-link-bg;
  }
}

}

.nav-stacked {

.nav-item {
  display: block;
  float: none;

  + .nav-item {
    margin-top: $nav-item-margin;
    margin-left: 0;
  }
}

}

// // Tabbable tabs //

// Hide tabbable panes to start, show them when `.active` .tab-content {

> .tab-pane {
  display: none;
}
> .active {
  display: block;
}

}