@import (reference)  "../variables/neptune-tokens.less";
@import (reference) "../variables/legacy-variables.less";

// mixins
@import (reference) "./mixins/_nav-divider.less";
@import (reference) "./mixins/_border-radius.less";
@import (reference) "./mixins/_logical-properties.less";

//
// Navs
// --------------------------------------------------

// Base class
// --------------------------------------------------

.nav {
  margin-bottom: 0;
  .padding(left, 0); // Override default ul/ol

  list-style: none;
  &:extend(.clearfix all);

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      outline-offset: -1px;
      padding: @nav-link-padding;
      color: var(--color-content-primary);
      font-weight: var(--font-weight-regular);
      font-size: var(--font-size-16);

      &:hover,
      &:focus {
        text-decoration: none;
        color: var(--color-content-accent-hover);
      }

      &:active {
        color: var(--color-content-accent-active);
      }
    }
  }

  > .active > a {
    color: var(--color-content-accent);
    font-weight: var(--font-weight-semi-bold);

    &:hover,
    &:focus {
      color: var(--color-content-accent-hover);
    }

    &:active {
      color: var(--color-content-accent-active);
    }
  }

  // Disabled state sets text to gray and nukes hover/tab effects

  > .disabled > a {
    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }
  }

  // Open dropdowns

  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: var(--color-background-neutral);
    }
  }

  // Nav dividers (deprecated with v3.0.1)
  //
  // This should have been removed in v3 with the dropping of `.nav-list`, but
  // we missed it. We don't currently support this anywhere, but in the interest
  // of maintaining backward compatibility in case you use it, it's deprecated.

  .nav-divider {
    .nav-divider();
  }

  // Prevent IE8 from misplacing imgs
  //
  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989

  > li > a > img {
    max-width: none;
  }
}

.nav-inverse {
  > li > a {
    color: @color-navy-content-primary;
  }

  > li.active > a {
    background-color: @color-navy-background-screen;
  }
}

// Tabs
// -------------------------

// Give the tabs something to sit on

.nav-tabs {
  border-bottom: 1px solid var(--color-border-neutral);

  > li {
    .float(left);

    // Make the list-items overlay the bottom border

    margin-bottom: -1px;

    // Actual tabs (as links)
    > a {
      .margin(right, 2px);

      line-height: var(--line-height-body);
      //border: 1px solid transparent;
      //border-radius: @border-radius-base @border-radius-base 0 0;
      border-bottom: 3px solid transparent;
      font-size: var(--font-size-16);
    }
  }

  > .active > a {
    border-bottom: 3px solid var(--color-border-neutral);

    &:hover,
    &:focus {
      color: var(--color-content-accent);
      cursor: default;
    }
  }
}

// Pills
// -------------------------

.nav-pills {
  > li {
    .float(left);

    font-size: var(--font-size-14);

    // Links rendered as pills
    > a {
      font-size: var(--font-size-14);
    }
  }
}

// Stacked pills

.nav-stacked {
  > li {
    float: none;

    > a {
      .border(left, 3px, solid, transparent);

      .padding(left, 21px);

      .padding(right, var(--size-24));

      transition: color 0.2s ease-in-out;

      &:active {
        transition: none;
      }

      @media (--screen-lg) {
        .padding(right, var(--size-32));

        .padding(left, 29px) !important;
      }
    }

    + li {
      .margin(left, 0); // no need for this gap between nav items
    }

    &.active > a {
      &,
      &:hover,
      &:focus {
        .border(left, 3px, solid, var(--color-interactive-accent));
        .padding(left, 21px);
      }
    }
  }
}

// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-justified {
  width: 100%;

  > li {
    float: none;
    display: table-cell;
    vertical-align: top;
    width: 1%;
    text-align: center;

    > a {
      text-align: center;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    .left(auto);
  }

  &.nav-pills > li > a {
    padding: 0 var(--size-4);
    line-height: var(--line-height-body);
  }
}

@media (--screen-md) {
  // Not using RTL mixin here because left/right values as equal

  .nav-justified-2-p-x {
    padding-right: percentage((1 / (2 * 2)));
    padding-left: percentage((1 / (2 * 2)));
  }

  .nav-justified-3-p-x {
    padding-right: percentage((1 / (3 * 2)));
    padding-left: percentage((1 / (3 * 2)));
  }

  .nav-justified-4-p-x {
    padding-right: percentage((1 / (4 * 2)));
    padding-left: percentage((1 / (4 * 2)));
  }

  .nav-justified-5-p-x {
    padding-right: percentage((1 / (5 * 2)));
    padding-left: percentage((1 / (5 * 2)));
  }

  .nav-justified-6-p-x {
    padding-right: percentage((1 / (6 * 2)));
    padding-left: percentage((1 / (6 * 2)));
  }

  .nav-justified-7-p-x {
    padding-right: percentage((1 / (7 * 2)));
    padding-left: percentage((1 / (7 * 2)));
  }

  .nav-justified-8-p-x {
    padding-right: percentage((1 / (8 * 2)));
    padding-left: percentage((1 / (8 * 2)));
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs

.nav-tabs-justified {
  border-bottom: 0;

  > li {
    float: none;
    display: table-cell;
    width: 1%;
    text-align: center;
    vertical-align: top;

    > a {
      // Override margin from .nav-tabs

      margin-right: 0;
      border-bottom: 1px solid var(--color-border-neutral);
      border-radius: @border-radius-base;
    }
  }

  > .active > a {
    &,
    &:hover,
    &:focus {
      border: 1px solid var(--color-border-neutral);
      border-bottom: 0;
    }
  }
}

// Tabbable tabs
// -------------------------

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

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

  > .active {
    display: block;
  }
}

// Dropdowns
// -------------------------

// Specific dropdowns

.nav-tabs .dropdown-menu {

  // make dropdown border overlap tab border

  margin-top: -1px;

  // Remove the top rounded corners here since there is a hard edge above the menu

  .border-top-radius(0);
}