/* Base class */
.nav {
  --nav-link-padding-x: 1rem;
  --nav-link-padding-y: .5rem;
  --nav-link-font-size: var(--base-font-size);
  --nav-link-font-weight: var(--base-font-weight);
  --nav-link-color: var(--link-color);
  --nav-link-hover-color: var(--link-color-h);
  --nav-link-disabled-color: var(--c-gray-600);

  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  --nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  display: block;
  padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
  font-size: (var(--nav-link-font-size));
  font-weight: var(--nav-link-font-weight);
  color: var(--nav-link-color);
  text-decoration: none;
  transition: var(--nav-link-transition);
}
.nav-link:hover,
  .nav-link:focus {
    color: var(--nav-link-hover-color);
    text-decoration: none;
  }
.nav-link.disabled {
    color: var(--nav-link-disabled-color);
    pointer-events: none;
    cursor: default;
  }
/* Tabs */
.nav-tabs {
  --nav-tabs-border-width: var(--border-width);
  --nav-tabs-border-color: var(--border-color);
  --nav-tabs-border-radius: var(--border-radius);
  --nav-tabs-link-hover-border-color: var(--c-gray-200) var(--c-gray-200) var(--nav-tabs-border-color);
  --nav-tabs-link-active-color: var(--c-gray-700);
  --nav-tabs-link-active-bg: var(--c-body-bg);
  --nav-tabs-link-active-border-color: var(--nav-link-hover-color);

  border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
}
.nav-tabs .nav-link {
    margin-bottom: calc(var(--nav-tabs-border-width)*-1);
    background: none;
    border: var(--nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--nav-tabs-border-radius);
    border-top-right-radius: var(--nav-tabs-border-radius);
  }
.nav-tabs .nav-link:hover,
    .nav-tabs .nav-link:focus {
      isolation: isolate;
      border-color: var(--nav-tabs-link-hover-border-color);
    }
.nav-tabs .nav-link.disabled,
    .nav-tabs .nav-link:disabled {
      color: var(--nav-link-disabled-color);
      background-color: transparent;
      border-color: transparent;
    }
.nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    color: var(--nav-tabs-link-active-color);
    background-color: var(--nav-tabs-link-active-bg);
    border-color: var(--nav-tabs-link-active-border-color);
  }
.nav-tabs .dropdown-menu {
    margin-top: calc(var(--nav-tabs-border-width)*-1);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
/* Pills */
.nav-pills {
  --nav-pills-border-radius: var(--border-radius);
  --nav-pills-link-active-color: var(--c-white);
  --nav-pills-link-active-bg: var{--c-primary};
}
.nav-pills .nav-link {
    background: none;
    border: 0;
    border-radius: var(--nav-pills-border-radius);
  }
.nav-pills .nav-link:disabled {
      color: var(--nav-link-disabled-color);
      background-color: transparent;
      border-color: transparent;
    }
.nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    color: var(--nav-pills-link-active-color);
    background-color: var(--nav-pills-link-active-bg);
  }
/* Justified variants */
.nav-fill > .nav-link,
  .nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center;
  }
.nav-justified > .nav-link,
  .nav-justified .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
  }
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
    width: 100%;
  }
/* Tabbable tabs */
.tab-content > .tab-pane {
    display: none;
  }
.tab-content > .active {
    display: block;
  }