$navigation-color: #334d5c;
$body-font-color: #ffffff;
$tab-font-color: #495057;
$border-color: #dee2e6;
$pills-color: #ed9345;
$radius : .25rem;

div.tabs {
  margin: 3em;

  nav {
    ul.nav-tabs {

      display: flex;
        display: -ms-flexbox;
      flex-wrap: wrap;
        -ms-flex-wrap: wrap;

      list-style: none;
      padding-left: 0;
      margin-bottom: 0;

      li.nav-item {
        margin-bottom: -1px;

        a.nav-link {
          display: block;
          padding: .5rem 1rem;
        }
      }

    }
  }

  div.tab-content {

    div.tab-pane {
      display: none;

      &.fade {
        transition: opacity .15s linear;
      }
      &.active {
        display: block;
      }
    }
  }

  &:not(.pills) {
    nav {
      ul.nav-tabs {
        border-bottom: 1px solid $border-color;

        li.nav-item {

          a.nav-link {
            border: 1px solid transparent;
            border-top-left-radius: $radius;
            border-top-right-radius: $radius;
            color: $navigation-color;
          }

          &.show a.nav-link,
          & a.nav-link.active {

            color: $tab-font-color;
            background-color: $body-font-color;
            border-color: $border-color $border-color $body-font-color;

          }
        }
      }
    }
  }

  &.pills {
    nav {
      ul.nav-tabs {

        border-bottom: 0;
        li.nav-item {

          & a.nav-link {
            border: 0;
            border-radius: $radius;
          }

          &.show > a.nav-link,
          & a.nav-link.active {
            color: $body-font-color;
            background-color: $pills-color;
          }
        }
      }
    }
  }
}