// 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 {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  color: $gray-darker;

  &.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 {
      cursor: not-allowed;
      color: $nav-disabled-link-hover-color;
      background-color: $nav-disabled-link-hover-bg;
    }
  }
}

// Nav normal

.nav-normal {
  box-sizing: border-box;
  border-bottom: 1px solid $border-color;

  .nav-item {
    display: inline-block;
    padding: $nav-normal-padding;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .2s ease-in-out;
    background: #FFFFFF;

    &:not(:last-child) {
      margin-right: rem(32px);
    }

    &.active {
      color: $nav-link-active-color;
      border-bottom: $nav-active-border-width solid $nav-link-active-color;
      background-color: $nav-link-active-bg;
    }

    &:hover {
      color: $nav-link-active-color;
    }

    &.disabled {
      cursor: not-allowed;
      color: $nav-disabled-link-color;
    }
  }
}

.nav-stacked {
  .nav-item {
    padding: $nav-stacked-padding;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
    color: $gray-dark;
    background: $brand-pure;

    &.active {
      color: $brand-pure;
      background: $nav-link-active-color;
    }

    &:hover {
      color: $brand-pure;
      background: $nav-link-active-color;
    }

    &.disabled {
      cursor: not-allowed;
      color: $nav-disabled-link-color;

      &:hover {
        background: $brand-pure;
      }
    }
  }
}

.nav-card {
  .nav-item {
    position: relative;
    display: inline-block;
    padding: $nav-cards-link-padding;
    overflow-y: visible;
    cursor: pointer;
    border: $nav-cards-border;
    border-bottom: none;
    border-radius: $nav-cards-link-border-radius;
    background-color: $nav-cards-item-bg;

    &.active,
    &:hover {
      color: $nav-cards-item-active-color;
    }

    &.active {
      z-index: 3;
      background-color: $nav-cards-item-active-bg;
    }

    .nav-link {
      line-height: $nav-cards-link-lineheight;
    }

    &.disabled,
    &.disabled:hover {
      color: $nav-disabled-link-color;
    }
  }

  .nav-item:not(:last-child) {
    margin-right: rem(4px);
  }
}

// Hide tabbable panes to start, show them when `.active`
.tab-content {
  > .tab-pane {
    display: none;
  }

  > .active {
    display: block;
  }
}
