@import "@{bootstrap}/navs.less";

.nav-header {
  float: right;
  > li { min-width: 100px; }
}
.nav-silent {
  > li > a {
    padding: .1em 0;
    color: @text-color;
  }
}

/**
 * Sidebar navigation used in learn.html
 **/
@media (min-width: @nav-sidebar-wrapper-min-width) and (min-height: @nav-sidebar-wrapper-min-height) {
  .nav-sidebar-wrapper {
   position: -webkit-sticky;
   position: sticky;
   top: @spacing-base;
  }
}

.nav-sidebar {
  > li.active > a,
  > li > a:hover {
    color: darken(@brand-primary, 10%);
    border-right: 2px solid lighten(@brand-primary, 10%);
    padding-right: 10px;
  }
}

@media (max-width: @navs-breakpoint-justified) {
  .nav-header {
     width: 100%;
    > li {
      float: none;
      display: table-cell;
      width: 1%;
      min-width: initial;
      > a { text-align: center; }
    }
  }
}

@media (max-width: @navs-breakpoint-horizontal) {
  .nav-header > li:last-child {
    float: left;
    width: 100%;
  }
}

@media (max-width: @logo-breakpoint) {
  .nav-header > li {
    float: left;
    width: 100%;
  }
}

@media (max-width: @screen-sm-min) {
  .nav-sidebar-wrapper { position: static !important; } /* !important used to override stickyfill */
  .nav.nav-sidebar { margin-bottom: 25px; }
  .nav-head,
  .nav.nav-sidebar { text-align: center; }
}


.nav-code {
  border-bottom: none;
}
.nav-code > li {
  float: right;
}
.nav-code > li > a {
  outline: 0;
  padding: .5em .75em;
  margin-right: 0;
  margin-left: 1px;
  font-size: .8em;
  line-height: 1.3;
}
.nav-code > li.active > a,
.nav-code > li.active > a:hover,
.nav-code > li.active > a:focus {
  border-color: #3f3f3f;
  background: #3f3f3f;
  color: #eee;
  padding-bottom: 15px;
  margin-bottom: -15px;
}
.nav-code > li > a:hover {
  border-color: transparent;
}
.nav-code + .tab-content pre {
  padding-top: 15px;
  padding-bottom: 15px;
}
