@import (reference) "../variables/legacy-variables.less";
@import (reference) '../variables/neptune-tokens.less';
@import (reference) "./mixins/_nav-vertical-align.less";
@import (reference) "./mixins/_nav-divider.less";
@import (reference) "./mixins/_arrows.less";
@import (reference) "./mixins/_border-radius.less";
@import (reference) "./mixins/_clearfix.less";
@import (reference) "./mixins/_center-block.less";
@import (reference) "./mixins/_hide-text.less";
@import (reference) "./mixins/_grid.less";
@import (reference) "./mixins/_tab-focus.less";
@import (reference) "./mixins/_logical-properties.less";
@import "./addons/_utilities.less";
@import "dropdowns.less";
@import "navs.less";
@import "close.less";


// stylelint-disable

//
// Navbars
// --------------------------------------------------

// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.navbar {
  position: relative;
  font-size: var(--font-size-14);
  min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  margin-bottom: @navbar-margin-bottom;
  border: 0 solid transparent;
  transition: border-top-width 0s linear;

  // Prevent floats from breaking the navbar

  &:extend(.clearfix all);

  @media (--screen-md) {
    border-radius: @navbar-border-radius;

    .container,
    .container-fluid {
      border: 0 solid transparent;
    }
  }
}

// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
  &:extend(.clearfix all);

  @media (--screen-md) {
    .float(left);
  }
}

// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.

.navbar-collapse {
  overflow-x: visible;
  &:extend(.clearfix all);

  -webkit-overflow-scrolling: touch;

  @media (--screen-md) {
    width: auto;
    border-top: 0;
    box-shadow: none;

    &.collapse {
      display: block !important;
      padding-bottom: 0; // Override default setting
    }

    // Undo the collapse side padding for navbars with containers to ensure
    // alignment of right-aligned contents.

    .navbar.affix &,
    .navbar-fixed-top &,
    .navbar-static-top &,
    .navbar-fixed-bottom & {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.

.container,
.container-fluid {

  > .navbar-header,
  > .navbar-collapse {

    @media (--screen-md) {
      margin-right: 0;
      margin-left: 0;
    }
  }
}

//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.

// Static top (unfixed, but 100% wide) navbar

.navbar-static-top {
  z-index: @zindex-navbar;
  margin-bottom: 0;

  @media (--screen-md) {
    border-radius: 0;

    .container,
    .container-fluid {
      border-width: 0;
      margin-bottom: -1px;
    }
  }
}

// Fix the top/bottom navbars when screen real estate supports it

.navbar.affix,
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right:0;
  left:0;
  z-index: @zindex-navbar-fixed;
  backface-visibility: hidden;
  background-color: @color-navy-background-elevated;

  .navbar-nav > li {
    > a,
    .navbar-title,
    .navbar-text {
      color: var(--color-background-screen);

      @media (--screen-sm-max) {
        color: var(--color-content-primary);
      }
    }
    &.active {
      > a {
        color: var(--color-content-accent-active);
      }
    }
  }

  // Undo the rounded corners

  @media (--screen-md) {
    border-radius: 0;
  }
}

.navbar.affix {
  top: (-1 * @navbar-height);
  border-top-width: @navbar-height;
  transition: border-top-width 0.2s ease-out, background-color 0.2s ease-out;
}

.navbar-fixed-top {
  top: 0;

  .container,
  .container-fluid {
    margin-bottom: -1px;
  }
}

.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0; // override .navbar defaults

  .container,
  .container-fluid {
    margin-top: -1px;
  }
}

// Brand/project name

.navbar-brand {
  .float(left);

  padding: @navbar-padding-vertical @navbar-padding-horizontal
    (@navbar-padding-vertical - 3px);
  font-size: var(--size-16); // Was 18px
  line-height: @navbar-line-height;
  margin-top: 12px;
  .margin(right, 10px);

  height: (@spacer * 3);
  width: 118px;

  &:hover,
  &:focus {
    text-decoration: none;
  }

  > img {
    display: block;
  }
}

// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
  position: relative;
  .float(left);

  padding: 9px 0;
  .navbar-vertical-align(34px);

  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 0;
  .margin(right, 12px);

  // We remove the `outline` here, but later compensate by attaching `:hover`
  // styles to `:focus`.

  &:focus {
    outline: 0;
  }

  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-body);
  margin-bottom: 8px;
  color: @color-navy-content-primary;

  .icon-bar:first-child {
    margin-top: 1px;
  }

  // Bars

  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-content-accent);
  }

  .icon-bar + .icon-bar {
    margin-top: 4px;
  }

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

    .icon-bar {
      background-color: var(--color-content-accent-hover);
    }
  }

  @media (--screen-md) {
    display: none;
  }
}

// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).

.navbar-nav {
  > li {
    > a,
    > button {
      padding: @navbar-padding;
      line-height: @navbar-line-height;
      outline-offset: -1px;
      transition: color ease @transition-duration;

      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        .padding(left, @padding-small-horizontal);

        .padding(right, @padding-small-horizontal);
      }

      &.dropdown-toggle {
        height: (@navbar-line-height + (2 * @navbar-padding-vertical));
        border: 0;
        background: none;
        line-height: @navbar-line-height;
        width: 100%;
        .text-align(left);

        color: var(--color-content-accent);

        &:active,
        &:focus {
          border-bottom-color: transparent;
          outline: 0;
          color: var(--color-content-accent-active);
        }

        @media (--screen-md) {
          .navbar-inverse & {
            color: @color-navy-content-primary;
          }

          &:hover {
            border-bottom-color: transparent;
            outline: 0;
            color: var(--color-content-accent-hover);
          }
        }

        .caret {
          .margin(left, (@spacer / 2));
        }
      }

      &.navbar-title-link {
        @media (--screen-md) {
          font-size: var(--font-size-20);
        }
      }
    }
  }

  > li.divider {
    display: none;
  }

  @media (max-width: @grid-float-breakpoint-max) {
    > li {
      > a,
      > button {
        font-size: var(--font-size-16);
        padding: @navbar-padding-mobile;
        -webkit-touch-callout: none; // When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.
      }
    }

    // Dropdowns get custom display when collapsed

    .navbar-collapse-flatten {
      .dropdown-toggle {
        display: none;
      }

      .dropdown-menu {
        position: static;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        display: block;
        float: none;
        width: 100%;
        box-shadow: none;
        padding: @padding-large-vertical 0;

        > li > a {
          padding: @navbar-padding-mobile;
        }
      }
    }

    > li.divider {
      display: block;
      .nav-divider(var(--color-interactive-secondary));
    }

    > li > a {
      color: var(--color-content-accent);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

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

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

  // Uncollapse the nav

  @media (--screen-md) {
    .float(left);

    > li {
      .float(left);

      > a {
        padding-bottom: (@navbar-padding-vertical - 2px);
        font-size: var(--font-size-14);
      }
    }
  }
}

// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.

.navbar-form {
  padding: 8px @navbar-padding-horizontal;

  .form-group {
    @media (max-width: @grid-float-breakpoint-max) {
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  // Undo 100% width for pull classes

  @media (--screen-md) {
    width: auto;
    border: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;

    // Vertically center in expanded, horizontal navbar

    margin-top: 12px;
    margin-bottom: 12px;

    // Mixin behavior for optimum display

    .form-inline();
  }

  @media (max-width: @grid-float-breakpoint) {
    border-bottom: 1px solid var(--color-border-neutral);
  }
}

// Dropdown menus

// Menu position and menu arrows

.navbar-nav {
  > li {
    > .dropdown-menu {
      margin-top: @navbar-height;
      .arrow-pointer(@dropdown-arrow-width);

      > li > a {
        font-size: var(--font-size-14);

        @media (max-width: @grid-float-breakpoint) {
          position: relative;
          -webkit-touch-callout: none; // When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.

          .badge {
            position: absolute;
            top: (@spacer * 2);
            .right(0);

            padding: 5px;
            text-indent: @navbar-collapse-max-width;
            width: @spacer;
            min-width: @spacer;
            height: @spacer;
          }
        }
      }

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

        &:hover,
        &:focus {
          background-color: var(--color-background-neutral);
        }
      }
    }

    @media (max-width: @screen-sm-min) {
      > .dropdown-menu-overlay {
        margin-top: 0;
      }
    }

    //show dropdowns in other states

    &.dropdown {
      &:active,
      &:focus,
      &:focus-within,
      &.focus-within {
        > a,
        > button {
          color: var(--color-content-accent-active);
        }

        .dropdown-menu {
          .dropdown-menu-open();
        }
      }

      &:hover {
        @media (--screen-md) {
          .dropdown-menu {
            .dropdown-menu-open();
          }
        }
      }
    }
  }
}

//Dropdown arrows

.navbar-right,
.pull-xs-right {
  li > .dropdown-menu {
    &::before {
      .right(calc((@dropdown-arrow-width * 2) + (@dropdown-arrow-width / 2)));

      .left(auto);

      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        .right((@dropdown-arrow-width * 2));
      }
    }
  }

  &.dropdown-menu-center {
    &::before {
      .right(auto);

      .left(50%);

      .margin(left, (@dropdown-arrow-width / -2));
    }
  }
}

// Menu position and menu caret support for dropups via extra dropup class

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
}

// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).

.navbar-btn {
  .navbar-vertical-align(@input-height-small);

  &.btn-sm {
    .navbar-vertical-align(@input-height-small);
  }

  &.btn-xs {
    .navbar-vertical-align(22);
  }

  font-weight: var(--font-weight-semi-bold);

  @media (max-width: @grid-float-breakpoint-max) {
    display: block;
  }
}

// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.

.navbar-text {
  .navbar-vertical-align(@size-24);

  @media (--screen-md) {
    .float(left);
    margin-left: @navbar-padding-horizontal;
    margin-right: @navbar-padding-horizontal;
  }
}

// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.

@media (--screen-md) {
  .navbar-left {
    .pull-xs-left();
  }

  .navbar-right {

    .pull-xs-right();

    ~ .navbar-right {
      .margin(right, 0);
    }
  }
}

// Alternate navbars
// --------------------------------------------------

// Default navbar

.navbar-default {
  background-color: transparent;

  .container,
  .container-fluid {
    border-color: var(--color-border-neutral);
  }

  .navbar-brand {
    color: @color-navy-content-primary;

    &:hover,
    &:focus {
      background-color: transparent;
    }
  }

  .navbar-text {
    color: var(--color-content-primary);
  }

  .navbar-nav {
    > li > a {
      color: var(--color-content-primary);

      @media (--screen-md) {
        border-bottom: 3px solid transparent;
      }

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

    > .active {
      > a,
      > .dropdown-toggle {

        font-weight: var(--font-weight-bold);
        &,
        &:hover,
        &:focus {
          color: var(--color-content-accent-active);
          background-color: transparent;
          border-color: transparent;
        }
      }
    }
  }

  // Dropdown menu items

  .navbar-nav {
    // Remove background color from open dropdown

    > .open > a {
      &,
      &:hover,
      &:focus,
      &:focus-within {
        background-color: transparent;
        color: var(--color-content-accent-active);
      }
    }

    @media (max-width: @grid-float-breakpoint-max) {
      // Dropdowns get custom display when collapsed

      .open .dropdown-menu {
        > li > a {
          color: var(--color-content-accent);

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

        > .active > a {
          font-weight: var(--font-weight-bold);
          &,
          &:hover,
          &:focus {
            color: var(--color-content-accent-active);
            background-color: transparent;
          }
        }
      }
    }
  }

  // Links in navbars
  //
  // Add a class to ensure links outside the navbar nav are colored correctly.

  .navbar-link {
    color: var(--color-content-accent);

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

  .btn-link {
    color: var(--color-content-accent);

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

// Inverse navbar

.navbar-inverse {
  background-color: transparent;

  .container,
  .container-fluid {
    border-color: var(--color-border-neutral);
  }

  .navbar-brand {
    color: var(--color-content-primary);

    &:hover,
    &:focus {
      color: var(--color-content-primary);
      background-color: transparent;
    }
  }

  .navbar-text {
    color: @color-navy-content-primary;
  }

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

      @media (--screen-md) {
        border-bottom: 3px solid transparent;
      }

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

    > .active {
      > a,
      > .dropdown-toggle {
        color: var(--color-content-accent-active);
        font-weight: var(--font-weight-bold);
        &,
        &:hover,
        &:focus {
          color: var(--color-content-accent-hover);
          background-color: transparent;
          border-color: transparent;
        }
      }
    }

    > .open > a,
    .dropdown:focus-within > a {
      &,
      &:hover,
      &:focus {
        background-color: transparent;
        color: var(--color-content-accent-hover);
      }
    }

    @media (max-width: @grid-float-breakpoint-max) {
      > li > a {
        color: var(--color-content-primary);
      }
    }
  }

  .navbar-link {
    color: @color-navy-content-primary;

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

  .btn-link {
    color: @color-navy-content-primary;

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

.navbar .navbar-brand,
.navbar-inverse .navbar-brand {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  color: transparent;

  &:hover,
  &:focus {
    color: transparent;
  }
}

.navbar .flag, .navbar .fast-flag {
  height: 24px;
  width: 24px;
  margin-top: 16px;
  .margin(right, 8px);

  .float(left);
}

.navbar .logo-text {
  height: 20px;
  width: 104px;
  margin-top: 16.5px;
  .margin(right, 8px);

  .float(left);
}

.cover {
  display: none;
}

@media (max-width: @grid-float-breakpoint-max) {
  .navbar-collapse {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100% !important;

    // Backwards compatibility if collapse-panel missing

    background-color: var(--color-background-screen);
    top: (@navbar-height - 2px);
    padding: 8px;

    .open,
    .dropdown:focus-within,
    .dropdown.focus-within {
      border-bottom: none;

      > a {
        color: var(--color-content-accent);
      }

      .caret {
        transform: rotate(-180deg);
      }
    }

    &.navbar-collapse-with-panel {
      top: 0;
      padding: 0;
      background-color: transparent;
    }

    .navbar-collapse-panel {
      position: fixed;
      height: 100%;
      top: 0;
      overflow-y: scroll;
      padding: 8px;
      background-color: var(--color-background-screen);
      color: var(--color-content-primary) !important;
      width: @navbar-collapse-max-width;
      max-width: @navbar-collapse-max-width !important;
      transition: transform 0.35s ease;
      transform: translateX(-@navbar-collapse-max-width);
    }

    .navbar-nav {
      > li {
        border-bottom: 1px solid var(--color-border-neutral);
      }
    }

    .dropdown-menu {
      position: relative;
      width: 100%;
      box-shadow: none;
      padding: 0;
      padding-bottom: @padding-large-vertical;
      float: none;
      margin-top: 0 !important;
      border-bottom: 1px solid var(--color-border-neutral);

      &::before {
        display: none;
      }

      .dropdown-header {
        padding: @navbar-padding-mobile;
      }
    }

    .navbar-toggle {
      .left(280px);

      opacity: 0;
      transition: opacity 0.35s ease;
      display: inline-block;
      position: absolute;
      top: 4px;

      &.close {
        margin-top: 0;
        padding: 9px 0;
      }
    }

    // Only show toggle after animation finished

    &.in {
      .navbar-toggle {
        opacity: 1;
      }
    }

    .cover {
      display: block;
      width: 100%;
      height: 100%;
      background-color: @color-navy-background-screen;
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    &.in,
    &[aria-expanded='true'] {
      .cover {
        opacity: 0.9;
      }

      .navbar-collapse-panel {
        transform: translateX(0);
      }
    }

    .navbar-btn.btn-group {
      display: flex;

      .btn {
        display: block;
        width: 100%;
        .text-align(left);

        + .dropdown-toggle {
          flex: 0;
        }
      }

      .dropdown-menu {
        width: 100%;
      }
    }
  }
}

.navbar .profile-name {
  .np-theme-light & {
    padding-bottom: 3px;
  }

  .caret {
    vertical-align: top;
    line-height: @navbar-line-height;
  }

  .text-ellipses,
  .text-ellipsis,
  .truncate {
    max-width: 75px;
    display: inline-block;
  }

  @media (min-width: @screen-lg-min) {
    .text-ellipses,
    .text-ellipsis,
    .truncate {
      max-width: 125px;
    }
  }

  @media (min-width: @screen-xl-min) {
    .text-ellipses,
    .text-ellipsis,
    .truncate {
      max-width: 220px;
    }
  }
}

.navbar[data-spy~='affix'] + * {
  margin-top: 0;
}

.navbar[data-spy~='affix'].affix + * {
  margin-top: @navbar-height;
}

@media (min-width: @screen-md-min) {
  .navbar + .jumbotron,
  .navbar + .jumbotron-image,
  .navbar + .jumbotron-image-inverse,
  .jumbotron-image-adjacent-to-navbar {
    margin-top: (-1 * @navbar-height - 2px);
  }

  .navbar.affix + .jumbotron,
  .navbar.affix + .jumbotron-image,
  .navbar.affix + .jumbotron-image-inverse {
    margin-top: 0;
  }
}

.navbar + .jumbotron,
.navbar + .jumbotron-image > .jumbotron,
.navbar + .jumbotron-image-inverse > .jumbotron,
.jumbotron-image-adjacent-to-navbar > .jumbotron {
  padding-bottom: 64px;

  @media (min-width: @screen-md-min) {
    padding-top: 140px;
    padding-bottom: 104px;
  }
}

.navbar {
  > .container .navbar-brand,
  > .container-fluid .navbar-brand {
    .margin(left, 0);
  }
}

@media (max-width: @screen-sm-max) {
  .navbar-static-top {
    background-color: @color-navy-background-elevated;
    border-bottom-color: transparent;
  }
}

.navbar-title {
  .float(left);
  font-size: var(--font-size-20);
  line-height: var(--line-height-title);
  margin-top: 12px;
  margin-bottom: 12px;
  font-weight: var(--font-weight-bold);
}

.navbar-subtitle {
  font-size: var(--font-size-14);
  margin-bottom: 8px;
}

.navbar-title,
.navbar-subtitle {
  color: @color-navy-content-primary;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 75%;

  @media (min-width: @screen-lg-min) {
    color: var(--color-content-primary);
    width: 100%;
  }
}

.navbar-logo {
  width: 127px;
  height: 22px;
  margin-top: 13px;
  margin-bottom: 21px;
}

@nav-toolbar-height: 64px;

.nav-toolbar {
  padding-top: 16px;
  margin-top: -16px;
  padding-bottom: 0;
  background-color: @color-navy-background-elevated;
  border-bottom: 1px solid var(--color-border-neutral);

  @media (min-width: @screen-lg-min) {
    margin-top: 0;
    background-color: var(--color-background-screen);

    &.affix {
      top: 0;
      z-index: @zindex-navbar;
      margin-top: 0;
      border-top: 0;
      position: fixed;
      backface-visibility: hidden;

      + .container,
      + .container-fluid {
        margin-top: @nav-toolbar-height !important;
      }
    }
  }

  @media (max-width: @screen-md-max) {
    &.affix {
      // we have a global affix rule which would be breaking to remove

      position: relative !important;

      + .container,
      + .container-fluid {
        margin-top: 0 !important;
      }
    }

    .btn-info:not(.disabled, :disabled),
    .btn-warning:not(.disabled, :disabled),
    .btn-danger:not(.disabled, :disabled) {
      color: var(--color-content-accent);
      border-color: var(--color-interactive-accent);
    }

    .btn-info:not(.disabled, :disabled):hover,
    .btn-warning:not(.disabled, :disabled):hover,
    .btn-danger:not(.disabled, :disabled):hover {
      color: @color-navy-content-primary;
    }

    .form-control,
    .input-group,
    .btn-input,
    .input-group-addon {
      border-color: #ffffff;
    }
  }

  h1 {
    line-height: var(--line-height-title);
  }

  .close {
    text-decoration: none;
    height: 32px;
  }
}

.nav-toolbar--compact {
  @media (min-width: @screen-lg-min) {
    padding-top: 0;
  }
}

@media (min-width: @screen-lg-min) {
  .column-layout .nav-toolbar.affix {
    // Use comment to allow older LESS compilers to work.

    width: ~'calc(100% - @{column-width})';
  }
}

// TODO this is a hack with no docs

.simple-nav {
  background-color: @color-navy-background-elevated;

  .navbar-nav > li > a {
    padding-top: (@navbar-padding-vertical + 4px);
    padding-bottom: (@navbar-padding-vertical + 1px);
  }

  .navbar-header {
    padding-top: 4px;
    width: ~'calc(100% - 140px)';

    @media (min-width: @screen-md-min) {
      width: ~'calc(100% - 340px)';
    }
  }

  .navbar-nav > li > a.dropdown-toggle {
    height: @nav-toolbar-height;
  }

  > .navbar-right li > a {
    // HACK - better to make things only collapse if inside collapse

    .float(right);
  }
}

@media (min-width: @screen-sm-min) {
  .simple-nav .navbar-nav > li > a {
    font-size: var(--font-size-16) !important;
  }
}

@media (min-width: @screen-lg-min) {
  .simple-nav {
    background-color: var(--color-background-screen);
    border-bottom: 1px solid var(--color-border-neutral);
  }
}

@media (max-width: @screen-md-max) {
  .simple-nav .navbar-nav > li > a {
    color: @color-navy-content-primary;

    &:not(.disabled, :disabled):focus,
    &:not(.disabled, :disabled):hover,
    &:not(.disabled, :disabled):active {
      color: var(--color-content-accent-hover);
    }
  }
}

.simple-nav .profile-name .text-ellipses,
.simple-nav .profile-name .text-ellipsis,
.simple-nav .profile-name .truncate {
  max-width: 240px;
}

//Public-nav

.tw-public-navigation-item-content__icon {
  vertical-align: middle;
}

.tw-public-navigation-item-content__text {
  display: inline-block;
  vertical-align: middle;
  max-width: 164px;
}

// Secondary navigation

@media (--screen-md) {
  .subnav {
    height: (
      @navbar-secondary-height * 2
    ) !important; //this line is necessary until we solve the style="height:0;" in navbar-collapse added when closing the mobile menu
    position: relative;
    min-height: @navbar-secondary-height;

    &::before {
      content: '';
      background-color: transparent;
      width: 100%;
      height: @navbar-secondary-height;
      position: absolute;
      top: @navbar-secondary-height;
      border-top: var(--color-border-neutral) solid 1px;
      .left(0);
    }

    &.navbar-inverse {
      &::before {
        background-color: @color-navy-background-screen;
        border-top: none;
      }
    }

    .navbar-nav > li {
      > a {
        padding-top: (@navbar-secondary-padding-vertical + 1);
      }

      > button {
        height: @navbar-secondary-height;
      }
    }

    .navbar-btn,
    .navbar-brand {
      margin-top: (
        @navbar-secondary-padding-vertical + @padding-small-vertical
      );
    }
  }

  .subnav-menu {
    position: absolute;
    top: @navbar-secondary-height;
  }
}

/* stylelint-enable */
.form-inline {
  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }

    // Make static controls behave like regular ones
    .form-control-static {
      display: inline-block;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
    .control-label {
      margin-bottom: 0;
      vertical-align: calc(-2px);
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        .padding(left, 0);
      }
    }

    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
      position: relative;
      .margin(left, 0);
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}

// Extracted form 'tranferwise.less'
.nav,
.navbar,
.pager,
.dropdown-menu {
  a {
    text-decoration: none;
  }
}

.tw-public-navigation-item-content__text.text-ellipsis,
.tw-public-navigation-item-content__text.text-ellipses,
.tw-public-navigation-item-content__text.truncate {
  display: inline-block;
}

.navbar-background--inverse {
  background-color: @color-navy-background-elevated;
}