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

.nav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  list-style: none;

  @include ltr {
    padding-left: 0;
  }
  @include rtl {
    padding-right: 0;
  }
}

.nav-link {
  display: block;
  padding: $nav-link-padding-y $nav-link-padding-x;
  text-decoration: if($link-decoration == none, null, none);

  @include hover-focus() {
    text-decoration: none;
  }

  // Disabled state lightens text
  &.disabled {
    color: $nav-link-disabled-color;
    pointer-events: none;
    cursor: default;
    @include themes($nav-theme-map, $create: parent) {
      color: themes-get-value("nav-link-disabled-color");
    }
  }
}

//
// Tabs
//

.nav-tabs {
  border-bottom: $nav-tabs-border-width solid;
  @include themes($nav-theme-map, $create: parent) {
    border-color: themes-get-value("nav-tabs-border-color");
  }

  .nav-item {
    margin-bottom: -$nav-tabs-border-width;
  }

  .nav-link {
    border: $nav-tabs-border-width solid transparent;
    @include border-top-radius($nav-tabs-border-radius);

    @include hover-focus() {
      @include themes($nav-theme-map, $create: parent) {
        border-color: themes-get-value("nav-tabs-link-hover-border-color");
      }
    }

    &.disabled {
      background-color: transparent;
      border-color: transparent;
      @include themes($nav-theme-map, $create: parent) {
        color: themes-get-value("nav-link-disabled-color");
      }
    }
  }

  .nav-link.active,
  .nav-item.show .nav-link {
    @include themes($nav-theme-map, $create: parent) {
      color: themes-get-value("nav-tabs-link-active-color");
      background-color: themes-get-value("nav-tabs-link-active-bg");
      border-color: themes-get-value("nav-tabs-link-active-border-color");
    }
  }

  .dropdown-menu {
    // Make dropdown border overlap tab border
    margin-top: -$nav-tabs-border-width;
    // Remove the top rounded corners here since there is a hard edge above the menu
    @include border-top-radius(0);
  }

  // &.nav-tabs-boxed {
  //   border-color: $nav-tabs-boxed-border-color;
  //   + .tab-content {

  //     border: $nav-tabs-border-width solid;
  //     border-color: $nav-tabs-boxed-border-color;

  //   }
  // }
}

.nav-tabs-boxed {
  .nav-tabs {
    border: 0;

    .nav-link {
      &.active {
        @include themes($nav-theme-map, $create: parent) {
          background-color: themes-get-value("nav-tabs-boxed-link-active-bg");
          border-bottom-color: themes-get-value("nav-tabs-boxed-link-active-bg");
        }
      }
    }
  }
  .tab-content {
    padding: $nav-tabs-boxed-content-padding-y $nav-tabs-boxed-content-padding-x;
    border: $nav-tabs-boxed-content-border-width solid;
    @include border-radius(0 $nav-tabs-boxed-content-border-radius $nav-tabs-boxed-content-border-radius $nav-tabs-boxed-content-border-radius);
    @include themes($nav-theme-map) {
      color: themes-get-value("nav-tabs-link-active-color");
      background-color: themes-get-value("nav-tabs-boxed-content-bg");
      border-color: themes-get-value("nav-tabs-boxed-content-border-color");
    }
  }

  &.nav-tabs-boxed-top-right {
    .nav-tabs {
      justify-content: flex-end;
    }
    .tab-content {
      @include border-radius($nav-tabs-boxed-content-border-radius 0 $nav-tabs-boxed-content-border-radius $nav-tabs-boxed-content-border-radius);
    }
  }

  &.nav-tabs-boxed-left,
  &.nav-tabs-boxed-right {
    display: flex;

    .nav-item {
      z-index: 1;
      flex-grow: 1;
      margin-bottom: 0;
    }
  }

  &.nav-tabs-boxed-left {
    @include rtl {
      flex-direction: row-reverse;
    }

    .nav-item {
      margin-right: -$nav-tabs-border-width;
    }

    .nav-link {
      @include border-radius($nav-tabs-boxed-content-border-radius 0 0 $nav-tabs-boxed-content-border-radius);

      &.active {
        @include themes($nav-theme-map) {
          border-color: themes-get-value("nav-tabs-boxed-left-active-border-color");
        }
      }
    }
  }

  &.nav-tabs-boxed-right {
    @include ltr {
      flex-direction: row-reverse;
    }
    @include rtl {
      flex-direction: row;
    }

    .nav-item {
      @include ltr {
        margin-left: -$nav-tabs-border-width;
      }
      @include rtl {
        margin-right: -$nav-tabs-border-width;
      }
    }

    .nav-link {
      @include border-radius(0 $nav-tabs-boxed-content-border-radius $nav-tabs-boxed-content-border-radius 0);

      &.active {
        @include themes($nav-theme-map) {
          border-color: themes-get-value("nav-tabs-boxed-right-active-border-color");
        }
      }
    }

    .tab-content {
      @include border-radius($nav-tabs-boxed-content-border-radius 0 $nav-tabs-boxed-content-border-radius $nav-tabs-boxed-content-border-radius);
    }
  }
}


//
// Pills
//

.nav-pills {
  .nav-link {
    @include border-radius($nav-pills-border-radius);
  }

  .nav-link.active,
  .show > .nav-link {
    @include themes($nav-theme-map, $create: parent) {
      color: themes-get-value("nav-pills-link-active-color");
      background-color: themes-get-value("nav-pills-link-active-bg");
    }
  }
}

//
// Underline
//

.nav-underline {
  border-bottom: (2 * $nav-tabs-border-width) solid;
  @include themes($nav-theme-map, $create: parent) {
    border-color: themes-get-value("nav-tabs-border-color");
  }

  .nav-item {
    margin-bottom: - (2 * $nav-tabs-border-width);
  }

  .nav-link {
    border: 0;
    border-bottom: (2 * $nav-tabs-border-width) solid transparent;
  }

  .nav-link.active,
  .show > .nav-link {
    background: transparent;
  }
}

@include theme-variant() {
  .nav-underline-#{$color} {
    .nav-link.active,
    .show > .nav-link {
      color: $value;
      border-color: $value;
    }
  }
}


//
// Justified variants
//

.nav-fill {
  .nav-item {
    flex: 1 1 auto;
    text-align: center;
  }
}

.nav-justified {
  .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
  }
}


// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`

.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}

// Tabs in Sidebar

.c-sidebar {
  .nav-tabs:first-child,
  .c-sidebar-close + .nav-tabs {
    .nav-link {
      display: flex;
      align-items: center;
      height: $sidebar-brand-height;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}
