.nav {
  list-style: none;
  margin-bottom: $baseLineHeight;
  @include clearfixHack();

  li {
    @include float-left($rtl);
    margin: 0;
    padding: 0;

    a {
      display: block;
      padding: $spacingS $spacingXl;
      text-decoration: none;

      @include transition(background-color .15s);
    }

    &.active {
      a {
        cursor: default;
      }
    }

    &.side-links {
      @include float-right($rtl);

      a {
        @include padding-left($rtl, 0);
        @include padding-right($rtl, $spacingS);
        padding-bottom: 0;
        color: $gray;

        .vicon {
          margin: 0;
          color: lighten($black, 60%);
        }

        &:hover,
        &:focus {
          text-decoration: underline;
          color: $linkColorHover;
          background: none;

          .vicon {
            color: $black;
          }
        }
      }
    }
  }
}

.nav-tabs {
  padding-left: $spacingS;
  border-top: 1px solid mix(#ffffff, $blueSoft, 63%);
  border-bottom: 1px solid mix(#ffffff, $blueSoft, 63%);
  background: mix(#ffffff, $blueSoft, 92%);

  li {
    a {
      &:hover,
      &:focus {
        background: mix(#ffffff, $blueSoft, 75%);
      }
    }

    &.active {
      a {
        padding-top: ($spacingS + 2);
        padding-bottom: ($spacingS + 1);
        margin: -3px -1px;
        border: 1px solid mix(#ffffff, $blueSoft, 63%);
        border-bottom: none;
        color: $black;
        background: $white;
      }
    }
  }
}

.nav-tabs-secondary {
  border-bottom: 1px solid mix(#ffffff, $blueSoft, 70%);
  font-size: ($baseFontSize * 1.1);

  &:after {
    content: "";
    position: relative;
    top: 1px;
    width: 100%; height: 1px;
    box-shadow: 0 0 2px rgba($black, (10/100));
  }

  li {
    a {
      position: relative;
      padding: $spacingS $spacingL;
      margin-bottom: -2px;

      &:hover,
      &:focus {
        background: mix(#ffffff, $blueSoft, 85%);
      }
    }

    &.active {
      a {
        color: $black;

        &:before, &:after {
          content: "";
          position: absolute;
          z-index: 5;
          left: 50%; bottom: 0;
          width: 0; height: 0;
          border-style: solid;
        }

        &:before {
          margin-left: -10px;
          border-color: transparent transparent mix(#ffffff, $blueSoft, 70%);
          border-width: 0 10px 10px;
        }

        &:after {
          bottom: -2px;
          margin-left: -10px;
          border-color: transparent transparent $white;
          border-width: 0 10px 10px;

          .popin & {
            border-bottom-color: $pageBg;
          }
        }

        &:hover,
        &:focus {
          background: none;
        }
      }
    }
  }
}

.nav-pills {
  border-top: 1px solid mix(#ffffff, $blueSoft, 63%);
  border-bottom: 1px solid mix(#ffffff, $blueSoft, 63%);
  background: mix(#ffffff, $blueSoft, 92%);
  margin: 0;

  li {
    a {
      margin: $spacingXs $spacingS;
      background: $panelBackground;
      border: 1px solid $panelBackground;
      border-radius: $borderRadiusS;
      line-height: $baseLineHeight;
      padding: $spacingXs $spacingS;

      &:hover,
      &:focus {
        background: lighten($borderColor, 5%);
        border-color: lighten($borderColor, 5%);
      }
    }

    &.active a {
      color: $black;
      border: 1px solid $borderColor;
      background: $white;
      cursor: default;
    }

    &.side-links {
      a {
        border: none;
      }
    }
  }
}

.nav-menu {
  $_black:#333;
  border-radius: $borderRadiusS;
  background: $white;
  box-shadow: 1px 1px 2px rgba($black, (20/100));

  li {
    a {
      position: relative;
      padding: $spacingM $spacingXl;
      color: $_black;
      font-size: 13px;
      &:hover,
      &:focus {
        background: #f7f7f7;
        color: $linkColorHover;
      }
    }

    &:first-child {
      a {
        border-radius: $borderRadiusS 0 0 $borderRadiusS;
      }
    }

    &.active {
      a {
        background: $_black;
        color: $white;
      }
    }
  }
}

.nav-tabs-section {
  .section {
    display: block;
  }

  .loader {
    display: none;
  }

  &.loading {
    .section {
      display: none;

      &.active {
        display: block;
      }
    }

    .loader {
      display: block;
    }
  }
}