// Beautiful nav tabs
.nav-tabs {
  margin-bottom: 1rem;

  // Make responsive horizontally
  display: block;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: clip;
  scrollbar-width: none;

  .nav-item {
    // Make responsive horizontally
    display: inline-block;

    .nav-link {
      border: none;
      color: #666;

      &.active {
        color: $primary;
        background-color: transparent;
        border: none;
        border-bottom: 4px solid $primary;
      }

      &:hover, &:focus {
        color: $primary;
      }
    }
  }
}