/*
  Tabs

  Use tabs to create groups of content and show only one group at a time.

  Markup:
  <div class="bg-blue pt-1">
    <ul class="tabs tabs--header nav nav-tabs">
      <li class="nav-item">
        <a href="#" class="nav-link">First</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link is-active">Second</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Third</a>
      </li>
    </ul>
  </div>

  Style guide 4.3
*/
.nav-tabs .nav-item + .nav-item
{
    margin-left: 1px;
}

.nav-tabs .nav-link
{
    line-height: normal;

    padding: .4em 1em;

    color: #0065a0;
}

/*
  Color variants

  Markup:
  <ul class="tabs tabs--header nav nav-tabs {{modifier_class}}">
    <li class="nav-item">
      <a href="#" class="nav-link">First</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link is-active">Second</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Third</a>
    </li>
  </ul>

  .tabs--primary - Primary color
  .tabs--secondary - Secondary color

  Style guide 4.3.1
*/
.tabs--header
{
    clear: both;
}

.tabs--header .nav-item .nav-link
{
    padding: .5em 2em;

    color: #0065a0;
    background-color: #cce5f4;
}

.tabs--header .nav-item .nav-link:focus,
.tabs--header .nav-item .nav-link:hover
{
    color: #0065a0;
    background-color: #fff;
}

.tabs--header .nav-item .nav-link.is-active
{
    color: #0065a0;
    background-color: #fff;
}

.tabs--header .dropdown.open .dropdown-toggle,
.tabs--header .dropdown.open .dropdown-toggle:focus,
.tabs--header .dropdown.open .dropdown-toggle:hover
{
    color: #e56385;
    background-color: #fff;
}

.tabs--primary
{
    border-bottom: 3px solid #62b3e5;
}

.tabs--primary .nav-link
{
    background-color: #cce5f4;
}

.tabs--primary .nav-item.active .nav-link,
.tabs--primary .nav-item.active .nav-link:focus,
.tabs--primary .nav-item.active .nav-link:hover,
.tabs--primary .nav-item .nav-link.is-active,
.tabs--primary .nav-item .nav-link.is-active:focus,
.tabs--primary .nav-item .nav-link.is-active:hover
{
    color: #fff;
    background-color: #62b3e5;
}

.tabs--secondary
{
    margin-top: 1rem;
}

.tabs--secondary .nav-link
{
    padding: .25em .75em;
}

.tabs--secondary .nav-link.is-active,
.tabs--secondary .nav-link.is-active:focus,
.tabs--secondary .nav-link.is-active:hover
{
    color: #fff;
    background-color: #62b3e5;
}

@media (max-width: 767px)
{
    .tabs--primary .nav-item,
    .tabs--secondary .nav-item
    {
        display: block;
        float: none;
    }
    .tabs--primary .nav-item + .nav-item,
    .tabs--secondary .nav-item + .nav-item
    {
        margin-left: 0;
    }
}

/*
  Size variants

  Markup:
  <div class="bg-blue pt-1">
    <ul class="tabs tabs--header nav nav-tabs {{modifier_class}}">
      <li class="nav-item">
        <a href="#" class="nav-link">First</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link is-active">Second</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Third</a>
      </li>
    </ul>
  </div>

  .tabs--lg - Larger tabs
  .tabs--sm - Smaller tabs

  Style guide 4.3.2
*/
.tabs--sm
{
    font-size: .875rem;

    border-bottom-width: 2px;
}

.tabs--lg
{
    font-size: 1.25rem;

    border-bottom-width: 4px;
}

.eb-tabs
{
    margin-bottom: 2rem;
}

.eb-tabs > ul
{
    border-bottom: 0;
}