// Table of Contents
// ==================================================
// Nav & Tab

// scss-lint:disable NestingDepth
// scss-lint:disable SelectorDepth

// Nav & Tab
// ==================================================
.nav {
  border-color: color(haze);
  list-style: none;
  padding: 0;

  > li {
    line-height: 1;

    > a { display: block; }
  }
}
.nav-list {
  border-radius: border-radius(b);
  border-style: solid;
  border-width: 1px;
  overflow: hidden;

  > li {
    border-bottom-style: solid;
    border-bottom-width: 1px;

    &:last-child { border-bottom: 0; }

    > a {
      padding: 15px 20px;

      &:active { color: color(primary); }
    }

    &.active > a { color: color(primary); }

    > ul {
      border-color: inherit;
      list-style: none;
      padding: 0;

      > li {
        > a {
          display: block;
          padding: 12px 20px;
        }

        &:first-child {
          > a { padding-top: 19px; }
        }
        &:last-child {
          > a { padding-bottom: 17px; }
        }
      }
    }

    &.nav-header {
      background: color(light-haze);
      padding: 17px 20px;
    }
  }

  &.dark {
    > li {
      &.nav-header { background: color(light-slate); }
    }
  }
  &.light {
    > li {
      &.nav-header { background: color(haze); }
    }
  }

  @each $name, $color in $colors-global {
    &.#{$name} {
      > li {
        > a:active { color: color($name); }

        &.active > a { color: color($name); }
      }
    }
  }

  .divider {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 5px 20px;
    overflow: hidden;
  }
}
.nav-pills,
.nav-tabs,
.tabbable {
  &::before,
  &::after {
    content: '';
    display: table;
    line-height: 0;
  }
  &::after { clear: both; }

  &.dark,
  &.light,
  &.white { background: color(transparent); }
}
.nav-pills,
.nav-tabs {
  > li {
    float: left;

    &.pull-right { float: right; }
  }
}
.nav-pills {
  > li {
    margin-right: 5px;

    &:last-child { margin: 0; }

    > a {
      background: color(light-haze);
      border: 1px solid color(light-haze);
      border-radius: border-radius(b);
      padding: 8px 10px;

      @if ($pseudo-elements) {
        &:hover,
        &:focus { background: color(haze); }
        &:active {
          background: color(primary);
          border-color: color(primary);
          color: color(white);
        }
      }
    }

    &.pull-right {
      margin-left: 5px;
      margin-right: 0;
    }
    &.active > a {
      background: color(primary);
      border-color: color(primary);
      color: color(white);
    }
  }

  &.dark {
    > li {
      > a {
        background: color(slate);
        border-color: color(dark-slate);

        @if ($pseudo-elements) {
          &:hover,
          &:focus { background: color(light-slate); }
        }
      }
    }
  }
  &.white {
    > li {
      > a {
        background: color(white);

        @if ($pseudo-elements) {
          &:hover,
          &:focus { background: color(light-haze); }
        }
      }
    }
  }
  &.dark,
  &.light,
  &.white {
    > li {
      > a:active,
      &.active > a {
        background: color(primary);
        border-color: color(primary);
        color: text-color-on(primary);
      }
    }
  }

  @each $name, $color in $colors-global {
    &.#{$name} {
      > li {
        > a:active,
        &.active > a {
          background: color($name);
          border-color: color($name);
          color: text-color-on($name);
        }
      }
    }
  }
}
.nav-tabs {
  border-bottom-style: solid;
  border-bottom-width: 1px;

  > li {
    margin-right: 20px;

    &:last-child { margin: 0; }

    > a,
    &.nav-tab {
      border-bottom: 2px solid color(transparent);
      padding-bottom: 20px;

      @if ($pseudo-elements) {
        &:hover,
        &:active,
        &:focus { border-color: inherit; }
      }
    }

    &.pull-right {
      margin-left: 20px;
      margin-right: 0;
    }
    &.active > a {
      border-color: inherit;
      color: color(primary);
    }
    &.nav-tab { border-color: inherit; }
  }

  @each $name, $color in $colors-global {
    &.#{$name} {
      > li {
        &.active > a { color: color($name); }
      }
    }
  }

  > .btn,
  > .btn-group {
    &:not(.dropdown):not(.dropup) {
      margin-bottom: 9px;
      margin-top: -7px;
    }
  }
}
.nav-stacked > li {
  float: none;
  margin: 0 0 5px;

  &:last-child { margin: 0; }
}
.pill-content,
.tab-content {
  > .pill-pane,
  > .tab-pane { display: none; }
  > .active { display: block; }
}