Nav Tabs

<ul class="nav nav-tabs nav-tabs--vcbs" role="tablist">
    <li role="presentation" class="active">
        <a href="#tabpanel-1" aria-controls="tabpanel-1" role="tab" data-toggle="tab">Tab 1</a>
    </li>
    <li role="presentation">
        <a href="#tabpanel-2" aria-controls="tabpanel-2" role="tab" data-toggle="tab">Tab 2</a>
    </li>
</ul>

<!-- Dark Version (Containing element for demo - do not include) -->
<div style="background-color: #000a3c; padding: 2.4rem">
    <ul class="nav nav-tabs nav-tabs--vcbs nav-tabs--vcbs-dark" role="tablist">
        <li role="presentation" class="active">
            <a href="#tabpanel-2" aria-controls="tabpanel-1" role="tab" data-toggle="tab">Tab 1</a>
        </li>
        <li role="presentation">
            <a href="#tabpanel-2" aria-controls="tabpanel-2" role="tab" data-toggle="tab">Tab 2</a>
        </li>
    </ul>
</div>

.nav-tabs--vcbs {
  margin-bottom: 1.6rem;

  > li {
    > a {
      @include typeTitle(true);
      text-transform: uppercase;
      color: $color-grey-dark;
      border: none;
      padding: 1.2rem;

      @media (min-width: $breakpoint-tablet) {
        @include typeHeadline(true);
      }

      @media (min-width: $breakpoint-tablet) {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
      }

      &:hover,
      &:focus {
        color: $color-base-blue;
        background-color: transparent;
      }
    }

    &.active > a {
      &,
      &:hover,
      &:focus {
        color: $color-base-blue;
        background-color: transparent;
        border: none;
        border-bottom: 0.4rem solid $color-base-blue;
        border-color: $color-base-blue;
      }
    }
  }

  &.nav-tabs--vcbs-dark {
    border: 0;

    > li {
      > a {
        &:hover,
        &:focus {
          color: $color-base-white;
        }
      }

      &.active > a {
        &,
        &:hover,
        &:focus {
          color: $color-base-white;
          border-color: $color-base-white;
        }
      }
    }
  }
}