/*------------------------------------*\

    @Navigation
    
\*------------------------------------*/

.nav {
  position: relative;
  top: 0;
  background-color: @base-white;
}

.brand > a {
  text-decoration: none;
  color: @base-color-333;
  padding: @base-padding-vertical 0;
  float: left;
  
  &:hover {
    text-decoration: none;
    color: @primary-color;
  }
}

nav a {
  text-decoration: none;
  color: @base-color-777;
  padding: @base-padding-vertical @base-padding-horizontal;
  display: inline-block;
  .border-radius(@border-radius);
  
  &:hover {
    background-color: @accent-white;
    text-decoration: none;
    color: @primary-color;
  }
}

.nav {
  padding-left: 0;
}

.nav > li > a {
  display: block;
  display: inline-block;
  padding: @base-padding-pill-nav-vertical @base-padding-pill-nav-horizontal;
  position: relative;
  .left-float;
}
    // Default Outline //
    .nav > a.btn--default-outline,
    .nav > a.default-outline {
      .button-version(@base-color-777, @btn-default-bg-outline, @btn-default-border-outline);
      &:hover {
        border-color: @base-color-777;
        color: @base-white;
        background-color: @base-color-777;
      }
      &:active {
        .box-shadow(none);
      }
    }
    
    // Primary Outline //
    .nav > li > a.btn--primary-outline,
    .nav > li > a.primary-outline {
      .button-version(@btn-primary-color-outline, @btn-primary-bg-outline, @btn-primary-border-outline);
      &:hover {
        border-color: @primary-color;
        color: @base-white;
        background-color: @primary-color;
      }
      &:active {
        .box-shadow(none);
      }
    }
    
    // Danger Outline //
    .nav > li > a.btn--danger-outline,
    .nav > li > a.danger-outline {
      .button-version(@btn-danger-color-outline, @btn-danger-bg-outline, @btn-danger-border-outline);
      &:hover {
        border-color: @danger-color;
        color: @base-white;
        background-color: @danger-color;
      }
      &:active {
        .box-shadow(none);
      }
    }
    
    // Info Outline //
    .nav > li > a.btn--info-outline,
    .nav > li > a.info-outline {
      .button-version(@btn-info-color-outline, @btn-info-bg-outline, @btn-info-border-outline);
      &:hover {
        border-color: @info-color;
        color: @base-white;
        background-color: @info-color;
      }
      &:active {
        .box-shadow(none);
      }
    }
    
    // Warning Outline //
    .nav > li > a.btn--warning-outline,
    .nav > li > a.warning-outline {
      .button-version(@btn-warning-color-outline, @btn-warning-bg-outline, @btn-warning-border-outline);
      &:hover {
        border-color: @warning-color;
        color: @base-white;
        background-color: @warning-color;
      }
      &:active {
        .box-shadow(none);
      }
    }
    
    // Success Outline //
    .nav > li > a.btn--success-outline,
    .nav > li > a.success-outline {
      .button-version(@btn-success-color-outline, @btn-success-bg-outline, @btn-success-border-outline);
      &:hover {
        border-color: @success-color;
        color: @base-white;
        background-color: @success-color;
      }
      &:active {
        .box-shadow(none);
      }
    }
    
    .nav > li > a:hover.btn--default,
    .nav > li > a:hover.btn--primary,
    .nav > li > a:hover.btn--info,
    .nav > li > a:hover.btn--success,
    .nav > li > a:hover.btn--danger,
    .nav > li > a:hover.btn--warning {
      color: @base-white;
    }

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  color: @primary-color;
}

.pill-nav > li > a {
  display: inline-block;
  .left-float;
  padding: @base-padding-pill-nav-vertical @base-padding-pill-nav-horizontal;
  .border-radius(@border-radius);
  position: relative;
}

.pill-nav > li > a:hover,
.pill-nav > li > a:focus {
  text-decoration: none;
  background-color: @base-color-eee;
}

.pill-nav li,
.pill-nav > li+li {
  display: inline-block;
  .rem(margin-right, 4);
}

.pill-nav > li > a.active {
  background-color: @primary-color;
  color: @base-white;
  
  &:hover {
    background-color: darken(@primary-color, 5%);
  }
  
  &:active {
    .box-shadow(inset 0px 3px 6px rgba(0,0,0,.25));
    .transition(all .25s ease);
    outline: 0;
	}
}