//
//  Vertical navigation
// --------------------------------------------------
//
// Basic Required Layout for Vertical Navigation
//
// .navbar navbar-pf-vertical
//   .navbar-header
//   .collapse navbar-collapse   <-- necessary for collapsing vertical nav and mobile
// .nav-pf-vertical [.nav-pf-vertical-callapsible-menus] [.nav-pf-persistent-secondary] [.hidden-icons-pf]
//   .list-group
//     .list-group-item [.active] [.secondary-nav-item-pf]
//       a
//         [primary icon] <-- Not shown if .hidden-icons-pf above
//         .list-group-item-value
//       .nav-pf-secondary-nav  <-- if .secondary-nav-item-pf above
//         .nav-item-pf-header
//           .secondary-collapse-toggle-pf data-toggle="collapse-secondary-nav"
//         .list-group
//           .list-group-item [.active] [tertiary-nav-item-pf]
//             a
//              .list-group-item-value
//            .nav-pf-tertiary-nav  <-- if .tertiary-nav-item-pf above
//              .nav-item-pf-header
//                .tertiary-collapse-toggle-pf data-toggle="collapse-tertiary-nav"
//              .list-group
//                .list-group-item [.active] [tertiary-nav-item-pf]
//                  a
//                    .list-group-item-value
//
// .container-pf-nav-pf-vertical [.nav-pf-persistent-secondary] [.hidden-icons-pf]
//

.nav-pf-vertical {
  background: @nav-pf-vertical-bg-color;
  border-right: 1px solid @nav-pf-vertical-border-color;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: @navbar-pf-height;
  width: @nav-pf-vertical-width;
  z-index: @zindex-navbar-fixed;
  .layout-pf-fixed-with-footer & {
    bottom: @footer-pf-height;
  }
  .ie9.layout-pf-fixed & {
    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
  }
   &.hidden.show-mobile-nav {  // Mobile mode open
    box-shadow: 0 0 3px fade(@color-pf-black, 15%);
    display: block !important;
  }
  &.hide-nav-pf {  // Used to hide navigation initially to avoid startup flicker
    visibility: hidden !important;
  }
  .list-group {
    border-top: 0;
    margin-bottom: 0;
  }
  .list-group-item {
    background-color: transparent;
    border-color: @nav-pf-vertical-item-border-color;
    padding: 0;
    > a {
      background-color: transparent;
      color: @nav-pf-vertical-color;
      cursor: pointer;
      display: block;
      font-size: (@font-size-base + 2);
      font-weight: @nav-pf-vertical-font-weight;
      height: @nav-pf-vertical-link-height;
      line-height: 26px;
      padding: @nav-pf-vertical-link-padding;
      position: relative;
      white-space: nowrap;
      width: @nav-pf-vertical-width;
      // When flexbox is supported nav item names take up all available space
      @supports (display: flex) {
        display: flex;
        padding-right: 0;
      }
      .fa,
      .glyphicon,
      .pficon {
        color: @nav-pf-vertical-icon-color;
        float: left;
        font-size: (@font-size-base + 8);
        line-height: 26px;
        margin-right: 10px;
        text-align: center;
        width: @nav-pf-vertical-icon-width;
      }
      &:hover {
        text-decoration: none;
      }
    }
    &.active,
    &:hover {
      > a {
        background-color: @nav-pf-vertical-active-bg-color;
        color: @nav-pf-vertical-active-color;
        font-weight: @nav-pf-vertical-active-font-weight;
        .fa,
        .glyphicon,
        .pficon {
          color: @nav-pf-vertical-active-icon-color;
        }
      }
    }
    &.active {
      > a:before {
        background: @nav-pf-vertical-active-before-color;
        content: " ";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 3px;
      }
      &:hover { // to over-ride default list group setting
        background-color: transparent;
        border-color: @nav-pf-vertical-item-border-color;
      }
    }
    .list-group-item-value {
      display: block;
      line-height: 25px;
      max-width: 120px;
      // If flexbox is supported, do not set max-width, take all space with just some right padding
      @supports (display: flex) {
        flex: 1;
        max-width: none;
        padding-right: 15px;
      }
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .list-group-item-separator {
    border-top-color: @nav-pf-vertical-item-border-color;
    border-top-width: 2px;
  }
  &.nav-pf-vertical-with-badges {
    width: @nav-pf-vertical-badges-width;
    .list-group-item > a {
      width: @nav-pf-vertical-badges-width;
    }
  }
  h5 {
    color: @nav-pf-vertical-secondary-color;
    cursor: default;
    font-size: (@font-size-base + 1);
    font-weight: 600;
    margin: @nav-pf-vertical-secondary-list-header-margin;
  }
  &.hidden-icons-pf {
    > .list-group > .list-group-item { // only the primary menu hides icons
      > a {
        .fa,
        .glyphicon,
        .pficon {
          display: none;
        }
      }
    }
    &.collapsed {
      display: none;
    }
  }
  .badge-container-pf {
    position: absolute;
    right: 15px;
    top: 20px;
    // If flexbox is supported, use relative positioning to place to the right of the label
    // and adjust the top position so that the secondary and tertiary nav items don't need to change
    @supports (display: flex) {
      padding-left: 0;
      padding-right: 15px;
      position: relative;
      right: 0;
      margin-top: -3px;
      top: 5px;
    }
    .badge {
      background: @nav-pf-vertical-badge-bg-color;
      color: @nav-pf-vertical-badge-color;
      float: left;
      font-size: @font-size-base;
      font-weight: 700;
      line-height: @line-height-base;
      margin: 0;
      padding: 0 7px;
      text-align: center;
      .pficon,
      .fa {
        font-size: (@font-size-base + 2);
        height: 20px;
        line-height: @line-height-base;
        margin-right: 3px;
        margin-top: -1px;
      }
    }
  }
}
.nav-pf-vertical-tooltip.tooltip {
  margin-left: 15px;
  .tooltip-inner {
    background-color: @color-pf-white;
    color: @color-pf-black-900;
  }
  .tooltip-arrow {
    border-bottom-color: @color-pf-white;
    left: calc(50% - 15px) !important;
  }
}
.hover-secondary-nav-pf {
  width: calc(@nav-pf-vertical-width * 2);
  &.nav-pf-vertical-with-badges {
    width: calc(@nav-pf-vertical-badges-width * 2);
  }
}
.hover-tertiary-nav-pf {
  width: calc(@nav-pf-vertical-width * 3);
  &.nav-pf-vertical-with-badges {
    width: calc(@nav-pf-vertical-badges-width * 3);
  }
  .nav-pf-secondary-nav {
    width: calc(@nav-pf-vertical-width * 2);
    .collapsed-tertiary-nav-pf {
      width: @nav-pf-vertical-width;
    }
  }
  .nav-pf-tertiary-nav {
    left: calc(@nav-pf-vertical-width * 2);
  }
  &.nav-pf-vertical-with-badges {
    .nav-pf-secondary-nav {
      width: calc(@nav-pf-vertical-badges-width * 2);
      .collapsed-tertiary-nav-pf {
        width: @nav-pf-vertical-badges-width;
      }
    }
    .nav-pf-tertiary-nav {
      left: calc(@nav-pf-vertical-badges-width * 2);
    }
  }
}
.nav-pf-vertical.collapsed {
  width: @nav-pf-vertical-collapsed-width;
  &.collapsed-secondary-nav-pf { // collapsed state with secondary menu pinned
    width: @nav-pf-vertical-width;
    &.nav-pf-vertical-with-badges {
      width: @nav-pf-vertical-badges-width;
    }
  }
  &.collapsed-tertiary-nav-pf { // collapsed state with tertiary menu pinned
    width: @nav-pf-vertical-width;
    &.nav-pf-vertical-with-badges {
      width: @nav-pf-vertical-badges-width;
    }
  }
  &.hover-secondary-nav-pf {
    width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width);
    &.nav-pf-vertical-with-badges {
      width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-badges-width);
    }
  }
  &.hover-tertiary-nav-pf {
    width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2));
    &.nav-pf-vertical-with-badges {
      width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-badges-width * 2));
    }
  }
}
.show-mobile-nav {
  &.show-mobile-secondary {
    width: @nav-pf-vertical-width;
    &.nav-pf-vertical-with-badges {
      width: @nav-pf-vertical-badges-width;
    }
  }
  &.show-mobile-tertiary {
    width: @nav-pf-vertical-width;
    &.nav-pf-vertical-with-badges {
      width: @nav-pf-vertical-badges-width;
    }
  }
  .mobile-nav-item-pf,
  .mobile-secondary-item-pf {
    .nav-pf-secondary-nav {
      left: 0;
      opacity: 1;
      visibility: visible;
      z-index: (@zindex-navbar-fixed + 4);
    }
    > .nav-pf-tertiary-nav {
      left: 0;
      opacity: 1;
      visibility: visible;
      z-index: (@zindex-navbar-fixed + 8);
    }
  }
  .nav-pf-secondary-nav {
    left: 0;
    .secondary-nav-item-pf:hover & {
      opacity: 0;
      visibility: hidden;
    }
  }
  .tertiary-nav-item-pf:hover {
    .nav-pf-tertiary-nav {
      opacity: 0;
      visibility: hidden;
    }
  }
  .tertiary-nav-item-pf.mobile-nav-item-pf:hover {
    .nav-pf-tertiary-nav {
      opacity: 1;
      visibility: visible;
    }
  }
}
.secondary-nav-item-pf {
  > a {
    cursor: default;
    &:after {
      color: @nav-pf-vertical-secondary-indicator-color;
      content: @fa-var-angle-right;
      display: block;
      font-family: "FontAwesome";
      font-size: (@font-size-base * 2);
      line-height: 30px;
      padding: @nav-pf-vertical-secondary-indicator-padding;
      position: absolute;
      right: 20px;
      top: 0;
    }
    .list-group-item-value {
      // If flex box is supported add some padding to account for the submenu indicator
      @supports (display: flex) {
        padding-right: 35px;
      }
    }
  }
  &.active,
  &:hover {
    > a {
      width: calc(@nav-pf-vertical-width + 1px);
      z-index: (@zindex-navbar-fixed + 1);
      &:after {
        right: 21px;
      }
      .collapsed-secondary-nav-pf & {
        z-index: 0;
      }
      .collapsed-tertiary-nav-pf & {
        z-index: 0;
      }
    }
  }
  .nav-pf-vertical-with-badges & {
    &.active,
    &:hover {
      > a {
        width: calc(@nav-pf-vertical-badges-width + 1px);
      }
    }
  }
}
.nav-pf-vertical.collapsed-secondary-nav-pf {
  width: @nav-pf-vertical-width;
  &.nav-pf-vertical-with-badges {
    width: @nav-pf-vertical-badges-width;
  }
  .secondary-nav-item-pf {  // Keep sub-menu indicators below collapsed menu
    &.active,
    &.hover {
      > a {
        z-index: @zindex-navbar-fixed;
      }
    }
  }
  &.hover-tertiary-nav-pf {
    width: @nav-pf-vertical-width;
    &.nav-pf-vertical-with-badges {
      width: @nav-pf-vertical-badges-width;
    }
  }
  .nav-pf-secondary-nav {
    left: 0;
  }
  .nav-pf-tertiary-nav {
    left: @nav-pf-vertical-width;
  }
  &.nav-pf-vertical-with-badges {
    .nav-pf-tertiary-nav {
      left: @nav-pf-vertical-badges-width;
    }
  }
}
.nav-pf-vertical.collapsed-tertiary-nav-pf {
  width: @nav-pf-vertical-width;
  &.nav-pf-vertical-with-badges {
    width: @nav-pf-vertical-badges-width;
  }
  .nav-pf-secondary-nav {
    width: @nav-pf-vertical-width;
    &.nav-pf-vertical-with-badges {
      width: @nav-pf-vertical-badges-width;
    }
  }
  .secondary-nav-item-pf,    // Keep sub-menu indicators below collapsed menu
  .tertiary-nav-item-pf {
    &.active,
    &.hover {
      > a {
        z-index: 0;
      }
    }
  }
}
.nav-pf-vertical.nav-pf-persistent-secondary.secondary-visible-pf {  // Persistent secondary nav settings
  @media (min-width: @screen-lg-min) { // secondary menu only persistent at lg screen
    width: calc(@nav-pf-vertical-width * 2);
    &.nav-pf-vertical-with-badges {
      width: calc(@nav-pf-vertical-badges-width * 2);
    }
    &.collapsed-secondary-nav-pf {
      width: @nav-pf-vertical-width;
      &.nav-pf-vertical-with-badges {
        width: @nav-pf-vertical-badges-width;
      }
      &.hover-tertiary-nav-pf {
        width: calc(@nav-pf-vertical-width * 2);
        &.nav-pf-vertical-with-badges {
          width: calc(@nav-pf-vertical-badges-width * 2);
        }
      }
    }
    &.collapsed-tertiary-nav-pf {
      width: @nav-pf-vertical-width;
      &.nav-pf-vertical-with-badges {
        width: @nav-pf-vertical-badges-width;
      }
    }
    &.collapsed {
      width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width);
      &.collapsed-secondary-nav-pf {
        width: @nav-pf-vertical-width;
        &.nav-pf-vertical-with-badges {
          width: @nav-pf-vertical-badges-width;
        }
      }
      &.collapsed-tertiary-nav-pf {
        width: @nav-pf-vertical-width;
        &.nav-pf-vertical-with-badges {
          width: @nav-pf-vertical-badges-width;
        }
      }
      &.hover-tertiary-nav-pf {
        width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2));
        &.nav-pf-vertical-with-badges {
          width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-badges-width * 2));
        }
      }
    }
    &.hover-tertiary-nav-pf {
      width: calc(@nav-pf-vertical-width * 3);
      &.nav-pf-vertical-with-badges {
        width: calc(@nav-pf-vertical-badges-width * 3);
      }
    }
    .secondary-nav-item-pf.active {
      .nav-pf-secondary-nav {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}
.nav-item-pf-header {
  color: @nav-pf-vertical-secondary-color;
  font-size: (@font-size-base + 4);
  margin: @nav-pf-vertical-secondary-header-margin;
  > a {
    cursor: pointer;
    margin-right: 7px;
    &:hover,
    &:focus {
      color: @link-color;
      text-decoration: none;
    }
  }
}
.nav-pf-vertical.collapsed { // Collapsed Primary Menu state
  width: @nav-pf-vertical-collapsed-width;
  .list-group-item { // Show only the icons
    > a {
      width: @nav-pf-vertical-collapsed-width;
      > .list-group-item-value {
        display: none;
      }
      > .badge-container-pf {
        display: none;
      }
    }
    &.secondary-nav-item-pf { // Adjust widths
      &.active > a,
      > a {
        width: @nav-pf-vertical-collapsed-width;
        &:after {
          right: 10px;
        }
      }
      &.active,
      &:hover {
        > a {
          width: (@nav-pf-vertical-collapsed-width + 2);
          &:after {
            right: 11px;
          }
        }
      }
    }
  }
}
.nav-pf-secondary-nav {
  background: @nav-pf-vertical-secondary-bg-color;
  border: 1px solid @nav-pf-vertical-border-color;
  border-bottom: none;
  border-top: none;
  bottom: 0;
  display: block;
  left: @nav-pf-vertical-width;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: @navbar-pf-height;
  visibility: hidden;
  width: @nav-pf-vertical-width;
  z-index: @zindex-navbar-fixed;
  .secondary-nav-item-pf.active & {  // Show secondary menu if active and either is collapsed
    .collapsed-secondary-nav-pf & {
      left: 0;
      opacity: 1;
      visibility: visible;
      z-index: (@zindex-navbar-fixed + 2);
    }
    .collapsed-tertiary-nav-pf & {
      left: 0;
      opacity: 1;
      visibility: visible;
    }
  }
  .secondary-nav-item-pf.is-hover & { // Show secondary menu if hovering
    .hover-secondary-nav-pf & {
      opacity: 1;
      visibility: visible;
    }
  }
  .ie9.layout-pf-fixed & {
    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
  }
  .layout-pf-fixed-with-footer & {
    bottom: @footer-pf-height;
  }
  .list-group-item {
    border: none;
    padding: @nav-pf-vertical-secondary-item-padding;
    width: @nav-pf-vertical-width;
    > a {
      background-color: @nav-pf-vertical-secondary-bg-color;
      color: @nav-pf-vertical-secondary-item-color;
      font-size: @font-size-base;
      font-weight: inherit;
      height: inherit;
      padding: @nav-pf-vertical-secondary-link-padding;
      margin-left: 20px;
      width: calc(@nav-pf-vertical-width - 20px);

      &:hover {
        .list-group-item-value {
          text-decoration: underline;
        }
      }
    }
    &.active > a:before {
      display: none;
    }
    &.active,
    &:hover {
      > a {
        background-color: @nav-pf-vertical-secondary-active-bg-color;
        color: @nav-pf-vertical-secondary-active-color;
      }
    }
    .badge-container-pf {
      top: 5px;
      .badge {
        background: @nav-pf-vertical-secondary-badge-bg-color;
        color: @nav-pf-vertical-badge-color;
      }
    }
    .list-group-item-value {
      padding-left: 5px;
    }
    &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
      > a {
        cursor: default;
        &:after {
          color: @nav-pf-vertical-secondary-indicator-color;
          content: @fa-var-angle-right;
          display: block;
          font-family: "FontAwesome";
          font-size: 20px;
          line-height: 20px;
          padding: @nav-pf-vertical-tertiary-indicator-padding;
          position: absolute;
          right: 20px;
          top: 4px;
        }
        // If flex box is supported add some padding to account for the submenu indicator
        .list-group-item-value {
          @supports (display: flex) {
            padding-right: 35px;
          }
        }
      }
      &.active,
      &:hover {
        > a {
          width: calc(@nav-pf-vertical-width - 19px);
          z-index: (@zindex-navbar-fixed + 3);
          &:after {
            right: 21px;
          }
        }
      }
    }
  }
  .nav-pf-vertical-with-badges & {
    left: @nav-pf-vertical-badges-width;
    width: @nav-pf-vertical-badges-width;
    .list-group-item {
      width: @nav-pf-vertical-badges-width;
      > a {
        width: calc(@nav-pf-vertical-badges-width - 20px);
      }
      &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
        &.active,
        &:hover {
          > a {
            width: calc(@nav-pf-vertical-badges-width - 19px);
          }
        }
      }
    }
  }
}
.nav-pf-tertiary-nav {
  background: @nav-pf-vertical-tertiary-bg-color;
  border: 1px solid @nav-pf-vertical-border-color;
  border-bottom: none;
  border-top: none;
  bottom: 0;
  display: block;
  left: calc(@nav-pf-vertical-width * 2);
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: @navbar-pf-height;
  visibility: hidden;
  width: @nav-pf-vertical-width;
  z-index: @zindex-navbar-fixed;
  .nav-pf-vertical-with-badges & {
    left: @nav-pf-vertical-badges-width;
    width: @nav-pf-vertical-badges-width;
    .show-mobile-nav {
      left: 0;
    }
  }
  .tertiary-nav-item-pf.active & {  // Show tertiary menu if active and collapsed
    .collapsed-tertiary-nav-pf & {
      left: 0;
      opacity: 1;
      visibility: visible;
      z-index: (@zindex-navbar-fixed + 3);
    }
  }
  .tertiary-nav-item-pf.is-hover & { // Show tertiary menu if hovering
    .hover-tertiary-nav-pf & {
      opacity: 1;
      visibility: visible;
      .collapsed.collapsed-tertiary-nav-pf & {
        left: 0;
      }
    }
  }
  .ie9.layout-pf-fixed & {
    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
  }
  .layout-pf-fixed-with-footer & {
    bottom: @footer-pf-height;
  }
  .nav-item-pf-header {
    color: @nav-pf-vertical-tertiary-color;
    margin: @nav-pf-vertical-tertiary-header-margin;
  }
  h5 {
    color: @nav-pf-vertical-tertiary-color;
    margin: @nav-pf-vertical-tertiary-list-header-margin;
  }
  .list-group-item {
    border: none;
    padding: @nav-pf-vertical-tertiary-item-padding;
    > a {
      background-color: transparent;
      color: @nav-pf-vertical-tertiary-item-color;
      font-size: @font-size-base;
      font-weight: inherit;
      height: inherit;
      margin: @nav-pf-vertical-tertiary-link-margin;
      padding: @nav-pf-vertical-tertiary-link-padding;
    }
    &.active > a:before {
      display: none;
    }
    &.active,
    &:hover {
      > a {
        background-color: @nav-pf-vertical-tertiary-active-bg-color;
        color: @nav-pf-vertical-tertiary-active-color;
      }
    }
    .badge-container-pf {
      top: 5px;
      .badge {
        background: @nav-pf-vertical-tertiary-badge-bg-color;
        color: @nav-pf-vertical-tertiary-badge-color;
      }
    }
    .list-group-item-value {
      padding-left: 5px;
    }
  }
}
.collapsed {
  .nav-pf-secondary-nav { // Adjust left placement
    left: @nav-pf-vertical-collapsed-width;
    .list-group-item {
      > a {
        width: calc(@nav-pf-vertical-width - 20px);
        > .list-group-item-value { // Continue to show labels for secondary menu items
          display: inline-block;
        }
        > .badge-container-pf {
          display: inline-block;
        }
      }
    }
  }
  .nav-pf-tertiary-nav { // Adjust left placement
    left: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width);
    .list-group-item {
      > a {
        width: calc(@nav-pf-vertical-width - 20px);
        > .list-group-item-value { // Continue to show labels for tertiary menu items
          display: inline-block;
        }
        > .badge-container-pf {
          display: inline-block;
        }
      }
    }
  }
  &.collapsed-secondary-nav-pf,
  &.collapsed-tertiary-nav-pf {
    width: @nav-pf-vertical-width;
    .secondary-nav-item-pf {
      &:hover {
        > a {
          z-index: @zindex-navbar-fixed;
        }
      }
    }
    .nav-pf-secondary-nav {
      left: 0;
    }
  }
  &.collapsed-secondary-nav-pf {
    .nav-pf-tertiary-nav {
      left: @nav-pf-vertical-width;
    }
  }
  &.collapsed-tertiary-nav-pf {
    .nav-pf-tertiary-nav {
      left: 0;
    }
  }
  &.hover-secondary-nav-pf {
    width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width);

    &.collapsed-secondary-nav-pf,
    &.collapsed-tertiary-nav-pf {
      width: @nav-pf-vertical-width;
    }
  }
  &.hover-tertiary-nav-pf {
    width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2));
    &.collapsed-secondary-nav-pf {
      width: calc(@nav-pf-vertical-width * 2);
    }
    &.collapsed-tertiary-nav-pf {
      width: @nav-pf-vertical-width;
    }
  }
  &.nav-pf-vertical-with-badges {
    .nav-pf-secondary-nav {
      .list-group-item {
        > a {
          width: calc(@nav-pf-vertical-badges-width - 20px);
        }
      }
    }
    .nav-pf-tertiary-nav {
      left: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-badges-width);
      .list-group-item {
        > a {
          width: calc(@nav-pf-vertical-badges-width - 20px);
        }
      }
    }
    &.collapsed-secondary-nav-pf,
    &.collapsed-tertiary-nav-pf {
      width: @nav-pf-vertical-badges-width;
    }
    &.collapsed-secondary-nav-pf {
      .nav-pf-tertiary-nav {
        left: @nav-pf-vertical-badges-width;
      }
    }
    &.hover-secondary-nav-pf {
      width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-badges-width);
      &.collapsed-secondary-nav-pf,
      &.collapsed-tertiary-nav-pf {
        width: @nav-pf-vertical-badges-width;
      }
    }
    &.hover-tertiary-nav-pf {
      width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2));
      &.collapsed-secondary-nav-pf {
        width: calc(@nav-pf-vertical-width * 2);
      }
      &.collapsed-tertiary-nav-pf {
        width: @nav-pf-vertical-width;
      }
    }
  }
}
.secondary-collapse-toggle-pf {
  display: none;
  font-family: @icon-font-name-fa;
  font-size: inherit;
  opacity: 0;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  &:before {
    content: @fa-var-arrow-circle-o-left;
  }
  &.collapsed {
    &:before {
      content: @fa-var-arrow-circle-o-right;
    }
  }
}
.tertiary-collapse-toggle-pf {
  display: none;
  font-family: @icon-font-name-fa;
  font-size: inherit;
  opacity: 0;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  &:before {
    content: @fa-var-arrow-circle-o-left;
  }
  &.collapsed {
    &:before {
      content: @fa-var-arrow-circle-o-right;
    }
  }
}
.nav-pf-vertical-collapsible-menus {
  .secondary-collapse-toggle-pf {
    display: inline-block;
  }
  .secondary-nav-item-pf.active {
    .secondary-collapse-toggle-pf {
      opacity: 1;
      pointer-events: all;
    }
  }
  .tertiary-collapse-toggle-pf {
    display: inline-block;
  }
  .tertiary-nav-item-pf.active {
    .tertiary-collapse-toggle-pf {
      opacity: 1;
      pointer-events: all;
    }
  }
}
.show-mobile-nav {
  .secondary-collapse-toggle-pf {
    display: inline-block;
    opacity: 1;
    pointer-events: all;
    &:before {
      content: @fa-var-arrow-circle-o-left;
    }
  }
  .tertiary-collapse-toggle-pf {
    display: inline-block;
    opacity: 1;
    pointer-events: all;
    &:before {
      content: @fa-var-arrow-circle-o-left;
    }
  }
}
.force-hide-secondary-nav-pf { // Used to temporarily hide sub-menus on an unpin event
  .nav-pf-secondary-nav {
    display: none !important;
  }
  .nav-pf-tertiary-nav {
    display: none !important;
  }
}
.nav-pf-vertical.transitions {
  transition: width @nav-pf-menu-transition-period;
  .nav-pf-secondary-nav {
    transition: visibility @nav-pf-menu-transition-period, opacity @nav-pf-menu-transition-period linear;
  }
  .nav-pf-tertiary-nav {
    transition: visibility @nav-pf-menu-transition-period, opacity @nav-pf-menu-transition-period linear;
  }
}