// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s or `<ul>`s.

.nav-wrap {
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  &.nav-inline {
    display: inline-block;
  }
}

.nav-link {
  display: inline-block;

  &:hover {
    text-decoration: none;
  }

  // Disabled state lightens text and removes hover/tab effects
  &.disabled {
    color: $nav-disabled-link-color;

    &:hover {
      color: $nav-disabled-link-hover-color;
      cursor: $cursor-disabled;
      background-color: $nav-disabled-link-hover-bg;
    }
  }
}

// Nav normal

.nav-normal {
  border-bottom: $nav-border-width solid $nav-border-color;
  height: rem(50px);
  box-sizing: border-box;
  .nav-item {
    display: inline-block;
    cursor: pointer;
    background: #fff;
    padding: $nav-normal-padding;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out;
    &.active {
      color: $nav-link-active-color;
      background-color: $nav-link-active-bg;
      border-bottom: $nav-active-border-width solid $nav-link-active-color;
    }
    &:hover {
      color: $nav-link-active-color;
    }
    &.disabled {
      color: $nav-disabled-link-color;
      cursor: not-allowed;
    }
  }
}
.nav-stacked {
  .nav-item {
    padding: $nav-stacked-padding;
    color: $gray-darker;
    cursor: pointer;
    background: $brand-pure;
    transition: background-color 0.2s ease-in-out;
    &.active {
      background: $nav-link-active-color;
      color: $brand-pure;
    }
    &:hover {
      background: $nav-link-active-color;
      color: $brand-pure;
    }
    &.disabled {
      color: $nav-disabled-link-color;
      cursor: not-allowed;
      &:hover {
        background: $brand-pure;
      }
    }
  }
}

.nav-card {
  .nav-item {
    display: inline-block;
    cursor: pointer;
    border-top: $nav-border-width solid $nav-border-color;
    border-left: $nav-border-width solid $nav-border-color;
    border-bottom: $nav-border-width solid $nav-border-color;
    padding: $nav-card-padding;
    background: $gray-lighter;
    color: $gray-darker;
    transition: background-color 0.2s ease-in-out;
    &.active {
      background: $nav-link-active-bg;
      color: $nav-link-active-color;
      border-bottom: none;
    }
    &:hover {
      background: $nav-link-active-bg;
      color: $nav-link-active-color;
      border-bottom: none;
    }
    &.disabled {
      color: $nav-disabled-link-color;
      cursor: not-allowed;
      &:hover {
        background: $gray-lighter;
        border-bottom: $nav-border-width solid $nav-border-color;
      }
    }
    &:last-child {
      border-right: $nav-border-width solid $nav-border-color;
    }
  }
}
// Hide tabbable panes to start, show them when `.active`
.tab-content {
  > .tab-pane {
    display: none;
  }

  > .active {
    display: block;
  }
}