//
//  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 rgba($color-pf-black, (15/100));
    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, .fas, .far, .fab, .fal,
      .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,
      &:focus {
        text-decoration: none;
      }
    }
    &.active > a,
    &:hover > a,
    & > a:focus {
      background-color: $nav-pf-vertical-active-bg-color;
      color: $nav-pf-vertical-active-color;
      font-weight: $nav-pf-vertical-active-font-weight;
      .fa, .fas, .far, .fab, .fal,
      .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
      // This generates a known issue on IE11:
      // https://github.com/patternfly/patternfly/pull/810
      @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, .fas, .far, .fab, .fal,
        .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, .fas, .far, .fab, .fal {
        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: unquote("calc(#{$nav-pf-vertical-width} * 2)");
  &.nav-pf-vertical-with-badges {
    width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
  }
}
.hover-tertiary-nav-pf {
  width: unquote("calc(#{$nav-pf-vertical-width} * 3)");
  &.nav-pf-vertical-with-badges {
    width: unquote("calc(#{$nav-pf-vertical-badges-width} * 3)");
  }
  .nav-pf-secondary-nav {
    width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
    .collapsed-tertiary-nav-pf {
      width: $nav-pf-vertical-width;
    }
  }
  .nav-pf-tertiary-nav {
    left: unquote("calc(#{$nav-pf-vertical-width} * 2)");
  }
  &.nav-pf-vertical-with-badges {
    .nav-pf-secondary-nav {
      width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
      .collapsed-tertiary-nav-pf {
        width: $nav-pf-vertical-badges-width;
      }
    }
    .nav-pf-tertiary-nav {
      left: unquote("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: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
    &.nav-pf-vertical-with-badges {
      width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})");
    }
  }
  &.hover-tertiary-nav-pf {
    width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
    &.nav-pf-vertical-with-badges {
      width: unquote("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: unquote("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: unquote("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;
    }
  }
  // Keep sub-menu indicators below collapsed menu
  .secondary-nav-item-pf,
  .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: unquote("calc(#{$nav-pf-vertical-width} * 2)");
    &.nav-pf-vertical-with-badges {
      width: unquote("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: unquote("calc(#{$nav-pf-vertical-width} * 2)");
        &.nav-pf-vertical-with-badges {
          width: unquote("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: unquote("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: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
        &.nav-pf-vertical-with-badges {
          width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2))");
        }
      }
    }
    &.hover-tertiary-nav-pf {
      width: unquote("calc(#{$nav-pf-vertical-width} * 3)");
      &.nav-pf-vertical-with-badges {
        width: unquote("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: unquote("calc(#{$nav-pf-vertical-width} - 20px)");
    }
    &.active > a:before {
      display: none;
    }
    &.active > a,
    &:hover > a,
    & > a:focus {
      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: unquote("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: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)");
      }
      &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
        &.active,
        &:hover {
          > a {
            width: unquote("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: unquote("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 > a,
    &:hover > a,
    & > a:focus {
      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: unquote("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: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
    .list-group-item {
      > a {
        width: unquote("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: unquote("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: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
    &.collapsed-secondary-nav-pf {
      width: unquote("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: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)");
        }
      }
    }
    .nav-pf-tertiary-nav {
      left: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})");
      .list-group-item {
        > a {
          width: unquote("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: unquote("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: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
      &.collapsed-secondary-nav-pf {
        width: unquote("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;
  }
}