//
// Nav
// --------------------------------------------------

// Caret
.nav {
  .dropdown-toggle .caret {
    border-bottom-color: @nav-tabs-color;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-color: @nav-tabs-color;
    border-top-width: 6px;
  }
}

// NAV PILLS
// -----------
.nav-pills {
  > li {
    &:first-child {
      > a {
        border-left: none;
        border-radius: @nav-border-radius 0 0 @nav-border-radius;
      }
    }
    &:last-child {
      > a {
        border-radius: 0 @nav-border-radius @nav-border-radius 0;
      }
    }
    &.active {
      > a,
      > a:hover {
        background-color: @btn-primary-active-bg;
      }
    }
    

    @media (max-width: @screen-xs-max) {
      float: none;
      display: block;
      
      &:first-child > a { border-radius: @nav-border-radius @nav-border-radius 0 0; }
      &:last-child > a  { border-radius: 0 0 @nav-border-radius @nav-border-radius; }
    }

    > a {
      background-color: @brand-secondary;
      border-left: 2px solid @btn-primary-active-bg;
      color: @inverse;
      font-size: floor(@component-font-size-base * 1.067); // ~16px
      font-weight: 700;
      line-height: 1;
      margin: 0;
      outline: none;
      padding: 12px 21px 13px;
      border-radius: 0;
      
      &:hover,
      &:focus {
        background-color: @btn-primary-hover-bg;
      }
      &:active {
        background-color: @btn-primary-active-bg;
      }

      @media (max-width: @screen-xs-max) {
        border-left: none;
        display: block;
      }
    }
  }
  > li + li {
    margin-left: 0;
  }
}

// NAV TABS
// -----------
.nav-tabs {
  margin-bottom: 20px;
  border-bottom-width: @nav-tabs-border-width;
  border-bottom-color: @nav-tabs-border-color;

  // With tabs content appended
  &.nav-append-content {
    border-bottom: none;
    margin-bottom: 0;
    
    > li {
      &.active {
        &:first-child {
          &:before {
            background-color: @inverse;
            border-left: @nav-tabs-border-width solid @nav-tabs-border-color;
            content: "";
            height: @nav-border-radius;
            left: 0;
            position: absolute;
            bottom: @nav-tabs-border-width - @nav-border-radius;
            width: @nav-border-radius;
            z-index: 2;
          }
        }
      }
    }
  }

  // List item
  > li {
    margin-bottom: -@nav-tabs-border-width;
    position: relative;

    // Active link
    &.active {
      z-index: 2;
      
      > a,
      > a:hover,
      > a:focus {
        border-color: @nav-tabs-border-color;
        border-bottom-color: @inverse;
        border-width: @nav-tabs-border-width;
        color: @nav-tabs-active-color;
      }
      .dropdown-toggle,
      .dropdown-toggle:hover,
      .dropdown-toggle:focus {
        color: @nav-tabs-active-color;
        
        .caret {
          border-bottom-color: @nav-tabs-active-color;
          border-top-color: @nav-tabs-active-color;
        }
      }
    }

    // Dropdown is open
    &.open,
    &.open.active {
      a.dropdown-toggle,
      a.dropdown-toggle:hover {
        background-color: @dropdown-background;
        border-color: @nav-tabs-border-color;
        border-bottom-color: transparent;
        color: @nav-tabs-active-color;

        .caret {
          border-bottom-color: @nav-tabs-active-color;
          border-top-color: @nav-tabs-active-color;
        }
      }

      .dropdown-menu {
        margin-top: -2px;
      }
    }
    &.open.active {
      z-index: @nav-open-zindex + 2;
    }

    // General link styling
    > a {
      border-width: @nav-tabs-border-width;
      font-size: ceil(@component-font-size-base * 0.933); // ~14px
      font-weight: 700;
      padding: 7px 21px 8px;      
      color: @nav-tabs-color;      
      border-radius: @nav-border-radius @nav-border-radius 0 0;
      .transition(none);

      &:hover,
      &:focus {
        background-color: transparent;
        border-color: transparent;
        border-bottom-color: transparent;
        outline: none;
        color: @nav-tabs-hover-color;
      }
    }

    // Dropdown
    .dropdown-toggle {
      position: relative;
      z-index: @nav-open-zindex + 1;
      
      &:hover,
      &:focus {
        .caret {
          border-bottom-color: @nav-tabs-hover-color;
          border-top-color: @nav-tabs-hover-color;
        }
      }
    }
    .dropdown-menu {
      border: @nav-tabs-border-width solid @nav-tabs-border-color;
      margin-top: -10px;
      border-radius: 0 @nav-border-radius @nav-border-radius @nav-border-radius;
      
      li {
        &:first-child > a {
          border-radius: 0 @nav-item-border-radius 0 0;
        }
        &:last-child > a {
          border-radius: 0 0 @nav-item-border-radius @nav-item-border-radius;
        }
        a {
          border-radius: 0;
        }
      }
    }
    .open .dropdown-toggle {
      background-color: @dropdown-background;
    }
  }

  @media (max-width: @screen-xs-max) {
    border-bottom: none;

    > li {
      display: block;
      float: none;

      &.active {
        > a,
        > a:hover,
        > a:focus {
          background-color: @brand-secondary;
          border: 2px solid @brand-secondary;
          color: @inverse;
          &:before { display: none; }
        }
        &:before { display: none; }
      }

      &.dropdown {
        &.active {
          > a,
          > a.dropdown-toggle,
          > a:hover {
            color: @inverse;
            
            .caret {
              border-bottom-color: @inverse;
              border-top-color: @inverse;
            }
          }
          &.open {
            > a,
            > a.dropdown-toggle,
            > a:hover {
              color: @nav-tabs-active-color;
              border-radius: @nav-item-border-radius @nav-item-border-radius 0 0;
              
              .caret {
                border-bottom-color: @nav-tabs-active-color;
                border-top-color: @nav-tabs-active-color;
              }
            }
          }
        }
      }

      > a,
      > a:hover,
      > a:focus {
        border: 2px solid @nav-tabs-border-color;
        margin-bottom: 10px;
        margin-right: 0;
        padding: 10px 15px;
        border-radius: @nav-item-border-radius;
      }
    }
  }
}

// Tab content
.tab-content {
  border: 2px solid #ddd;
  border-radius: @nav-border-radius;
  margin-bottom: 20px;
  padding: 20px 20px 5px;
  position: relative;
  z-index: 1;
}

// NAV LIST
// -----------
.nav-list {
  padding-left: @nav-list-gap;
  padding-right: @nav-list-gap;

  .nav-header {
    margin-left: -@nav-list-gap;
    margin-right: -@nav-list-gap;
    padding: 0 @nav-list-gap;
    font-weight: 700;
    line-height: 1.538; // ~20px
  }

  > li {
    margin-bottom: 3px;

    &.active {
      > a,
      > a:hover,
      > a:focus {
        background-color: mix(@brand-primary, white, 10%);
        color: mix(@brand-primary, white, 85%);
      }
    }

    &.divider {
      height: 2px;
      border-bottom: none;
      margin: 13px -@nav-list-gap 17px 0;
      background-color: mix(@brand-primary, white, 10%);
    }

    > a {
      border-radius: @nav-item-border-radius;
      font-size: @component-font-size-base;
      line-height: 1.333; // ~20px
      font-weight: 700;
      margin-left: -@nav-list-gap;
      margin-right: -@nav-list-gap;
      padding: 6px @nav-list-gap 8px;
      text-shadow: none;
    }
  }
  .badge.pull-right {
    margin: 1px -4px -1px 0;
  }
}

.nav-header {
  color: mix(@brand-primary, white, 40%);
  font-size: floor(@component-font-size-base * .867); // ~13px
  text-transform: uppercase;
}

// Nav list with a background color
.nav-list-vivid {
  background-color: mix(@brand-primary, white, 9%);
  border-radius: @nav-item-border-radius;
  padding-bottom: 2px;

  > li {
    margin-bottom: 2px;
    
    &.divider {
      background-color: transparent;
      margin: 3px 0 0;
    }
    &.active {
      > a,
      > a:hover,
      > a:focus {
        background-color: @brand-secondary;
        color: @inverse;
      }
    }
    > a {
      border-radius: 0;
      color: mix(@brand-primary, white, 85%);
      font-size: ceil(@component-font-size-base * .933); // ~14px
      
      &:hover,
      &:focus {
        color: mix(@brand-secondary, black, 85%);
      }
    }
  }
  .nav-header {
    &:first-child {
      padding-top: 10px;
    }
  }
}