.pf-c-nav {
  --pf-c-nav--Width: #{pf-size-prem(290px)};
  --pf-c-nav--Transition: var(--pf-global--Transition);
  --pf-c-nav__item--m-expanded__toggle-icon--Transform: rotate(90deg);

  // dark modifier
  --pf-c-nav--m-dark__list-link--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-nav--m-dark__list-link--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-nav--m-dark__list-link--Color: var(--pf-global--Color--light-300);
  --pf-c-nav--m-dark__list-link--m-current--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__list-link--hover--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__list-link--focus--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__list-link--after--Bottom: var(--pf-global--spacer--sm);
  --pf-c-nav--m-dark__list-link--active--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__simple-list-link--Color: var(--pf-global--Color--light-300);
  --pf-c-nav--m-dark__simple-list-link--hover--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__simple-list-link--focus--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__simple-list-link--active--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__simple-list-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-nav--m-dark__simple-list-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-nav--m-dark__simple-list-link--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-nav--m-dark__simple-list-link--m-current--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__simple-list-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-nav--m-dark__item--m-expanded--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav--m-dark__item--m-expanded__list-link--after--Bottom: 0;
  --pf-c-nav--m-dark__item--m-expanded__list-link--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav--m-dark__item--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
  --pf-c-nav--m-dark__item--m-current__simple-list-link--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__item--m-current__list-link--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__section-title--Color: var(--pf-global--Color--light-100);
  --pf-c-nav--m-dark__c-divider--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-nav--m-dark__separator--BackgroundColor: var(--pf-global--BackgroundColor--dark-400); // remove at breaking change
  --pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
  --pf-c-nav--m-dark__item--m-current__separator--BackgroundColor: var(--pf-global--BackgroundColor--dark-300); // remove at breaking change
  --pf-c-nav--m-dark__subnav--MarginTop: 0;
  --pf-c-nav--m-dark__list-link--after--Width: #{pf-size-prem(40px)};

  // divider
  --pf-c-nav__c-divider--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-nav__c-divider--MarginBottom: var(--pf-global--spacer--sm);
  --pf-c-nav__c-divider--MarginLeft: var(--pf-c-nav__list-link--PaddingLeft);
  --pf-c-nav__simple-list__c-divider--MarginLeft: var(--pf-c-nav__simple-list-link--PaddingLeft);
  --pf-c-nav__simple-list--nested__c-divider--MarginLeft: var(--pf-c-nav__simple-list-link--nested--PaddingLeft);

  // List link
  --pf-c-nav__list-link--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-nav__list-link--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-nav__list-link--md--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-nav__list-link--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav__list-link--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-nav__list-link--md--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-nav__list-link--after--Width: #{pf-size-prem(50px)};
  --pf-c-nav__list-link--after--Height: #{pf-size-prem(3px)};

  @media screen and (min-width: $pf-global--breakpoint--md) {
    --pf-c-nav__list-link--PaddingRight: var(--pf-c-nav__list-link--md--PaddingRight);
    --pf-c-nav__list-link--PaddingLeft: var(--pf-c-nav__list-link--md--PaddingLeft);
  }

  // font weight
  --pf-c-nav__list-link--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-nav__list-link--active--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-nav__list-link--focus--FontWeight: var(--pf-global--FontWeight--normal);

  // color
  --pf-c-nav__list-link--Color: var(--pf-global--Color--dark-100);
  --pf-c-nav__list-link--hover--Color: var(--pf-global--link--Color);
  --pf-c-nav__list-link--active--Color: var(--pf-global--link--Color);
  --pf-c-nav__list-link--focus--Color: var(--pf-global--link--Color);

  // after
  --pf-c-nav__list-link--after--Bottom: 0;
  --pf-c-nav__list-link--after--Left: var(--pf-c-nav__list-link--PaddingLeft);
  --pf-c-nav__list-link--after--md--Left: var(--pf-c-nav__list-link--md--PaddingLeft);
  --pf-c-nav__list-link--hover--after--BackgroundColor: var(--pf-global--link--Color);
  --pf-c-nav__list-link--active--after--BackgroundColor: var(--pf-global--link--Color);
  --pf-c-nav__list-link--focus--after--BackgroundColor: var(--pf-global--link--Color);

  @media screen and (min-width: $pf-global--breakpoint--md) {
    --pf-c-nav__list-link--after--Left: var(--pf-c-nav__list-link--after--md--Left);
  }

  // List simple link
  --pf-c-nav__simple-list-link--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-nav__simple-list-link--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-nav__simple-list-link--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav__simple-list-link--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-nav__simple-list-link--nested--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-nav__simple-list-link--nested--md--PaddingLeft: calc(var(--pf-global--spacer--lg) + var(--pf-global--spacer--md));

  @media screen and (min-width: $pf-global--breakpoint--md) {
    --pf-c-nav__simple-list-link--nested--PaddingLeft: var(--pf-c-nav__simple-list-link--nested--md--PaddingLeft);
  }

  // font
  --pf-c-nav__simple-list-link--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-nav__simple-list-link--active--FontWeight: var(--pf-global--FontWeight--semi-bold);
  --pf-c-nav__simple-list-link--focus--FontWeight: var(--pf-global--FontWeight--semi-bold);

  // color
  --pf-c-nav__simple-list-link--Color: var(--pf-global--Color--dark-100);
  --pf-c-nav__simple-list-link--hover--Color: var(--pf-global--link--Color);
  --pf-c-nav__simple-list-link--active--Color: var(--pf-global--link--Color);
  --pf-c-nav__simple-list-link--focus--Color: var(--pf-global--link--Color);

  // background
  --pf-c-nav__simple-list-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--150);
  --pf-c-nav__simple-list-link--active--BackgroundColor: var(--pf-global--BackgroundColor--150);
  --pf-c-nav__simple-list-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--150);

  // List horizontal link
  --pf-c-nav__horizontal-list-item--MarginRight: var(--pf-global--spacer--xl);
  --pf-c-nav__horizontal-list-link--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-nav__horizontal-list-link--md--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-nav__horizontal-list-link--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav__horizontal-list-link--lg--PaddingBottom: var(--pf-global--spacer--lg);

  @media screen and (min-width: $pf-global--breakpoint--lg) {
    --pf-c-nav__horizontal-list-link--PaddingBottom: var(--pf-c-nav__horizontal-list-link--lg--PaddingBottom);
    --pf-c-nav__horizontal-list-link--PaddingTop: var(--pf-c-nav__horizontal-list-link--md--PaddingTop);
  }

  // font
  --pf-c-nav__horizontal-list-link--FontWeight: var(--pf-global--FontWeight--normal);

  // color
  --pf-c-nav__horizontal-list-link--Color: var(--pf-global--Color--light-300);
  --pf-c-nav__horizontal-list-link--hover--Color: var(--pf-global--active-color--400);
  --pf-c-nav__horizontal-list-link--active--Color: var(--pf-global--active-color--400);
  --pf-c-nav__horizontal-list-link--focus--Color: var(--pf-global--active-color--400);

  // after
  --pf-c-nav__horizontal-list-link--after--Height: #{pf-size-prem(3px)};
  --pf-c-nav__horizontal-list-link--hover--after--BackgroundColor: var(--pf-global--active-color--400);
  --pf-c-nav__horizontal-list-link--active--after--BackgroundColor: var(--pf-global--active-color--400);
  --pf-c-nav__horizontal-list-link--focus--after--BackgroundColor: var(--pf-global--active-color--400);

  // List tertiary item
  --pf-c-nav__tertiary-list-item--MarginRight: var(--pf-global--spacer--xl);
  --pf-c-nav__tertiary-list-link--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-nav__tertiary-list-link--PaddingBottom: var(--pf-global--spacer--sm);

  // font
  --pf-c-nav__tertiary-list-link--FontWeight: var(--pf-global--FontWeight--normal);

  // color
  --pf-c-nav__tertiary-list-link--Color: var(--pf-global--Color--dark-100);
  --pf-c-nav__tertiary-list-link--hover--Color: var(--pf-global--link--Color);
  --pf-c-nav__tertiary-list-link--active--Color: var(--pf-global--link--Color);
  --pf-c-nav__tertiary-list-link--focus--Color: var(--pf-global--link--Color);

  // after
  --pf-c-nav__tertiary-list-link--after--Height: #{pf-size-prem(3px)};
  --pf-c-nav__tertiary-list-link--hover--after--BackgroundColor: var(--pf-global--link--Color);
  --pf-c-nav__tertiary-list-link--active--after--BackgroundColor: var(--pf-global--link--Color);
  --pf-c-nav__tertiary-list-link--focus--after--BackgroundColor: var(--pf-global--link--Color);

  // Subnav links
  --pf-c-nav__subnav--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-nav__subnav--MaxHeight: 100%;

  // List toggle
  --pf-c-nav__list-toggle--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-nav__list-toggle--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-nav__list-toggle--FontSize: #{pf-font-prem(16px)}; // set unique font size for dropdown caret based on design spec
  --pf-c-nav__list-toggle--Transition: .2s ease-in 0s;

  // Nav section
  --pf-c-nav__section--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-nav__section__section--MarginTop: var(--pf-global--spacer--xl);

  // Nav section title
  --pf-c-nav__section-title--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-nav__section-title--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-nav__section-title--md--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-nav__section-title--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav__section-title--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-nav__section-title--md--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-nav__section-title--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-nav__section-title--Color: var(--pf-global--Color--dark-200);
  --pf-c-nav__section-title--FontWeight: var(--pf-global--FontWeight--semi-bold);

  @media screen and (min-width: $pf-global--breakpoint--md) {
    --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--md--PaddingRight);
    --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--md--PaddingLeft);
  }

  // ============================================================ //
  // Modifiers
  // ============================================================ //

  // Modifier - current item
  --pf-c-nav__list-link--m-current--Color: var(--pf-global--link--Color);
  --pf-c-nav__list-link--m-current--FontWeight: var(--pf-global--FontWeight--semi-bold);
  --pf-c-nav__list-link--m-current--after--BackgroundColor: var(--pf-global--link--Color);

  // Modifier - simple list current
  --pf-c-nav__simple-list-link--m-current--Color: var(--pf-global--link--Color);
  --pf-c-nav__simple-list-link--m-current--FontWeight: var(--pf-global--FontWeight--semi-bold);
  --pf-c-nav__simple-list-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--150);

  // List item seperator
  --pf-c-nav__separator--Height: var(--pf-global--BorderWidth--sm); // remove at breaking change
  --pf-c-nav__separator--BackgroundColor: var(--pf-global--BorderColor--100); // remove at breaking change
  --pf-c-nav__separator--MarginTop: var(--pf-global--spacer--sm); // remove at breaking change
  --pf-c-nav__separator--MarginBottom: var(--pf-global--spacer--sm); // remove at breaking change
  --pf-c-nav__separator--MarginLeft: var(--pf-c-nav__list-link--PaddingLeft); // remove at breaking change
  --pf-c-nav__simple-list__separator--MarginLeft: var(--pf-c-nav__simple-list-link--PaddingLeft); // remove at breaking change
  --pf-c-nav__simple-list--nested__separator--MarginLeft: var(--pf-c-nav__simple-list-link--nested--PaddingLeft); // remove at breaking change

  // Modifier - current item
  --pf-c-nav__horizontal-list-link--m-current--Color: var(--pf-global--active-color--400);
  --pf-c-nav__horizontal-list-link--m-current--after--BackgroundColor: var(--pf-global--active-color--400);

  // Modifier - current item
  --pf-c-nav__tertiary-list-link--m-current--Color: var(--pf-global--link--Color);
  --pf-c-nav__tertiary-list-link--m-current--after--BackgroundColor: var(--pf-global--link--Color);

  // Scroll button
  --pf-c-nav__scroll-button--Top: var(--pf-global--spacer--sm);
  --pf-c-nav__scroll-button--ZIndex: var(--pf-global--ZIndex--xs);
  --pf-c-nav__scroll-button--Width: var(--pf-global--spacer--xl);
  --pf-c-nav__scroll-button--Height: #{pf-size-prem(40px)};
  --pf-c-nav__scroll-button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-nav__scroll-button--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-nav__scroll-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-nav__scroll-button--hover--Color: var(--pf-global--active-color--400);
  --pf-c-nav__scroll-button--nth-of-type-1--BoxShadow: 20px 0 10px -4px rgba(255, 255, 255, .7); // This is a special one-off shadow for nav
  --pf-c-nav__scroll-button--nth-of-type-2--BoxShadow: -20px 0 10px -4px rgba(255, 255, 255, .7); // This is a special one-off shadow for nav
  --pf-c-nav__scroll-button--m-dark--nth-of-type-1--BoxShadow: 20px 0 10px -4px rgba(21, 21, 21, .7); // This is a special one-off shadow for nav
  --pf-c-nav__scroll-button--m-dark--nth-of-type-2--BoxShadow: -20px 0 10px -4px rgba(21, 21, 21, .7); // This is a special one-off shadow for nav

  // Base styling
  position: relative;

  .pf-c-nav__scroll-button {
    display: none;
    visibility: hidden;
  }

  // Disable underline
  [class*="list"] [class*="link"] {
    &,
    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }
  }

  &.pf-m-start .pf-c-nav__scroll-button:nth-of-type(1) {
    display: block;
    visibility: visible;
  }

  &.pf-m-end .pf-c-nav__scroll-button:nth-of-type(2) {
    display: block;
    visibility: visible;
  }

  // Divider
  .pf-c-divider {
    // Update during breaking change
    padding-left: var(--pf-c-nav__c-divider--MarginLeft);

    // end - Update during breaking change
    margin-top: var(--pf-c-nav__c-divider--MarginTop);
    margin-bottom: var(--pf-c-nav__c-divider--MarginBottom);
    margin-left: 0;
  }

  &.pf-m-dark {
    --pf-c-nav__list-link--PaddingTop: var(--pf-c-nav--m-dark__list-link--PaddingTop);
    --pf-c-nav__list-link--PaddingBottom: var(--pf-c-nav--m-dark__list-link--PaddingBottom);
    --pf-c-nav__list-link--Color: var(--pf-c-nav--m-dark__list-link--Color);
    --pf-c-nav__list-link--hover--Color: var(--pf-c-nav--m-dark__list-link--hover--Color);
    --pf-c-nav__list-link--focus--Color: var(--pf-c-nav--m-dark__list-link--focus--Color);
    --pf-c-nav__list-link--active--Color: var(--pf-c-nav--m-dark__list-link--active--Color);
    --pf-c-nav__list-link--m-current--Color: var(--pf-c-nav--m-dark__list-link--m-current--Color);
    --pf-c-nav__list-link--hover--after--BackgroundColor: var(--pf-global--active-color--400);
    --pf-c-nav__list-link--active--after--BackgroundColor: var(--pf-global--active-color--400);
    --pf-c-nav__list-link--focus--after--BackgroundColor: var(--pf-global--active-color--400);
    --pf-c-nav__list-link--after--Bottom: var(--pf-c-nav--m-dark__list-link--after--Bottom);
    --pf-c-nav__list-link--m-current--after--BackgroundColor: var(--pf-global--active-color--400);
    --pf-c-nav__simple-list-link--Color: var(--pf-c-nav--m-dark__simple-list-link--Color);
    --pf-c-nav__simple-list-link--hover--Color: var(--pf-c-nav--m-dark__simple-list-link--hover--Color);
    --pf-c-nav__simple-list-link--focus--Color: var(--pf-c-nav--m-dark__simple-list-link--focus--Color);
    --pf-c-nav__simple-list-link--active--Color: var(--pf-c-nav--m-dark__simple-list-link--active--Color);
    --pf-c-nav__simple-list-link--hover--BackgroundColor: var(--pf-c-nav--m-dark__simple-list-link--hover--BackgroundColor);
    --pf-c-nav__simple-list-link--focus--BackgroundColor: var(--pf-c-nav--m-dark__simple-list-link--focus--BackgroundColor);
    --pf-c-nav__simple-list-link--active--BackgroundColor: var(--pf-c-nav--m-dark__simple-list-link--active--BackgroundColor);
    --pf-c-nav__simple-list-link--m-current--Color: var(--pf-c-nav--m-dark__simple-list-link--m-current--Color);
    --pf-c-nav__simple-list-link--m-current--BackgroundColor: var(--pf-c-nav--m-dark__simple-list-link--m-current--BackgroundColor);
    --pf-c-nav__section-title--Color: var(--pf-c-nav--m-dark__section-title--Color);
    --pf-c-nav__separator--BackgroundColor: var(--pf-c-nav--m-dark__separator--BackgroundColor);
    --pf-c-nav__subnav--MarginTop: var(--pf-c-nav--m-dark__subnav--MarginTop);
    --pf-c-nav__list-link--after--Width: var(--pf-c-nav--m-dark__list-link--after--Width);

    .pf-c-divider {
      --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-dark__c-divider--BackgroundColor);
    }

    .pf-c-nav__item {
      &.pf-m-current {
        --pf-c-nav__simple-list-link--Color: var(--pf-c-nav--m-dark__item--m-current__simple-list-link--Color);
        --pf-c-nav__list-link--Color: var(--pf-c-nav--m-dark__item--m-current__list-link--Color);
        --pf-c-nav__separator--BackgroundColor: var(--pf-c-nav--m-dark__item--m-current__separator--BackgroundColor); // remove at breaking change

        // stylelint-disable-next-line
        .pf-c-divider {
          --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColor);
        }
      }

      &.pf-m-expanded {
        padding-bottom: var(--pf-c-nav--m-dark__item--m-expanded--PaddingBottom);

        // stylelint-disable-next-line
        > .pf-c-nav__link {
          --pf-c-nav__list-link--after--Bottom: var(--pf-c-nav--m-dark__item--m-expanded__list-link--after--Bottom);
          --pf-c-nav__list-link--PaddingBottom: var(--pf-c-nav--m-dark__item--m-expanded__list-link--PaddingBottom);
        }
      }
    }

    .pf-c-nav__list > .pf-c-nav__item {
      // stylelint-disable-next-line
      &.pf-m-current,
      > .pf-c-nav__link.pf-m-current {
        background-color: var(--pf-c-nav--m-dark__item--m-current--BackgroundColor);
      }
    }
  }
}

// Set width when nav is child of sidebar to prevent collapsing
.pf-c-page__sidebar .pf-c-nav {
  @media screen and (min-width: $pf-global--breakpoint--md) {
    width: var(--pf-c-nav--Width);
  }
}

.pf-c-page__header-nav {
  .pf-c-nav__scroll-button {
    background-color: var(--pf-global--BackgroundColor--100);

    &:nth-of-type(1) {
      box-shadow: var(--pf-c-nav__scroll-button--m-dark--nth-of-type-1--BoxShadow);
    }

    &:nth-of-type(2) {
      box-shadow: var(--pf-c-nav__scroll-button--m-dark--nth-of-type-2--BoxShadow);
    }
  }
}


// List default
.pf-c-nav__list {
  // Item
  > .pf-c-nav__item {
    position: relative;

    .pf-c-divider {
      --pf-c-nav__c-divider--MarginLeft: var(--pf-c-nav__simple-list--nested__c-divider--MarginLeft);
    }
  }

  > .pf-c-nav__item > .pf-c-nav__link {
    // After - border bottom treatment for top level links
    &::after {
      position: absolute;
      bottom: var(--pf-c-nav__list-link--after--Bottom);
      left: var(--pf-c-nav__list-link--after--Left);
      width: var(--pf-c-nav__list-link--after--Width);
      height: var(--pf-c-nav__list-link--after--Height);
      content: "";
    }
  }

  // Link
  .pf-c-nav__link {
    position: relative;
    display: flex;
    align-items: baseline;
    padding:
      var(--pf-c-nav__list-link--PaddingTop)
      var(--pf-c-nav__list-link--PaddingRight)
      var(--pf-c-nav__list-link--PaddingBottom)
      var(--pf-c-nav__list-link--PaddingLeft);
    font-weight: var(--pf-c-nav__list-link--FontWeight);
    color: var(--pf-c-nav__list-link--Color);


    // States
    &.pf-m-hover,
    &:hover {
      --pf-c-nav__list-link--Color: var(--pf-c-nav__list-link--hover--Color);

      &::after {
        background-color: var(--pf-c-nav__list-link--hover--after--BackgroundColor);
      }
    }

    &.pf-m-active,
    &:active {
      --pf-c-nav__list-link--FontWeight: var(--pf-c-nav__list-link--active--FontWeight);
      --pf-c-nav__list-link--Color: var(--pf-c-nav__list-link--active--Color);

      &::after {
        background-color: var(--pf-c-nav__list-link--active--after--BackgroundColor);
      }
    }

    &.pf-m-focus,
    &:focus {
      --pf-c-nav__list-link--FontWeight: var(--pf-c-nav__list-link--focus--FontWeight);
      --pf-c-nav__list-link--Color: var(--pf-c-nav__list-link--focus--Color);

      &::after {
        background-color: var(--pf-c-nav__list-link--focus--after--BackgroundColor);
      }
    }
  }

  // States
  .pf-m-current.pf-c-nav__link,
  .pf-m-current > .pf-c-nav__link {
    --pf-c-nav__list-link--FontWeight: var(--pf-c-nav__list-link--m-current--FontWeight);
    --pf-c-nav__list-link--Color: var(--pf-c-nav__list-link--m-current--Color);

    &::after {
      background-color: var(--pf-c-nav__list-link--m-current--after--BackgroundColor);
    }
  }
}


// Separator --- remove this block at breaking change
.pf-c-nav__separator {
  height: var(--pf-c-nav__separator--Height);
  margin-top: var(--pf-c-nav__separator--MarginTop);
  margin-bottom: var(--pf-c-nav__separator--MarginBottom);
  margin-left: var(--pf-c-nav__separator--MarginLeft);
  background-color: var(--pf-c-nav__separator--BackgroundColor);

  .pf-c-nav__simple-list & {
    --pf-c-nav__separator--MarginLeft: var(--pf-c-nav__simple-list__separator--MarginLeft);
  }

  .pf-c-nav__item & {
    --pf-c-nav__separator--MarginLeft: var(--pf-c-nav__simple-list--nested__separator--MarginLeft);
  }
}

// Toggle caret
.pf-c-nav__toggle {
  flex: none;
  padding-right: var(--pf-c-nav__list-toggle--PaddingRight);
  padding-left: var(--pf-c-nav__list-toggle--PaddingLeft);
  margin-left: auto;
  font-size: var(--pf-c-nav__list-toggle--FontSize);
  line-height: 1;
  pointer-events: none;
  border: 0;

  // Add transition to base
  & > * {
    transition: var(--pf-c-nav__list-toggle--Transition);
  }
}

// Rotate the icon
.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle > * {
  transform: var(--pf-c-nav__item--m-expanded__toggle-icon--Transform);
}

// List simple
// no bottom border, no children. Used independently or as a subnav item of .pf-c-nav__list (default list component).
.pf-c-nav__simple-list {
  .pf-c-divider {
    --pf-c-nav__c-divider--MarginLeft: var(--pf-c-nav__simple-list__c-divider--MarginLeft);
  }

  // List simple link
  .pf-c-nav__link {
    display: block;
    padding:
      var(--pf-c-nav__simple-list-link--PaddingTop)
      var(--pf-c-nav__simple-list-link--PaddingRight)
      var(--pf-c-nav__simple-list-link--PaddingBottom)
      var(--pf-c-nav__simple-list-link--PaddingLeft);
    font-weight: var(--pf-c-nav__simple-list-link--FontWeight);
    color: var(--pf-c-nav__simple-list-link--Color);

    // States
    &.pf-m-hover,
    &:hover {
      --pf-c-nav__simple-list-link--Color: var(--pf-c-nav__simple-list-link--hover--Color);

      background-color: var(--pf-c-nav__simple-list-link--hover--BackgroundColor);
    }

    &.pf-m-focus,
    &:focus {
      --pf-c-nav__simple-list-link--FontWeight: var(--pf-c-nav__simple-list-link--focus--FontWeight);
      --pf-c-nav__simple-list-link--Color: var(--pf-c-nav__simple-list-link--focus--Color);

      background-color: var(--pf-c-nav__simple-list-link--focus--BackgroundColor);
    }

    &.pf-m-active,
    &:active {
      --pf-c-nav__simple-list-link--FontWeight: var(--pf-c-nav__simple-list-link--active--FontWeight);
      --pf-c-nav__simple-list-link--Color: var(--pf-c-nav__simple-list-link--active--Color);

      background-color: var(--pf-c-nav__simple-list-link--active--BackgroundColor);
    }

    &.pf-m-current {
      --pf-c-nav__simple-list-link--FontWeight: var(--pf-c-nav__simple-list-link--m-current--FontWeight);
      --pf-c-nav__simple-list-link--Color: var(--pf-c-nav__simple-list-link--m-current--Color);

      background-color: var(--pf-c-nav__simple-list-link--m-current--BackgroundColor);
    }

    // Adjust padding of descendant links
    .pf-c-nav__item & {
      --pf-c-nav__simple-list-link--PaddingLeft: var(--pf-c-nav__simple-list-link--nested--PaddingLeft);
    }
  }
}

// Horizontal and tertiary nav
.pf-c-nav__horizontal-list,
.pf-c-nav__tertiary-list {
  @include pf-overflow-hide-scroll;

  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;

  .pf-c-nav__link {
    position: relative;
    display: inline-block;
  }
}

// List horizontal, masthead
.pf-c-nav__horizontal-list {
  vertical-align: bottom;

  .pf-c-nav__item {
    margin-right: var(--pf-c-nav__horizontal-list-item--MarginRight);
  }

  .pf-c-nav__link {
    padding-top: var(--pf-c-nav__horizontal-list-link--PaddingTop);
    padding-bottom: var(--pf-c-nav__horizontal-list-link--PaddingBottom);
    font-weight: var(--pf-c-nav__horizontal-list-link--FontWeight);
    color: var(--pf-c-nav__horizontal-list-link--Color);
    white-space: nowrap;

    // States
    &.pf-m-hover,
    &:hover {
      --pf-c-nav__horizontal-list-link--Color: var(--pf-c-nav__horizontal-list-link--hover--Color);

      &::after {
        background-color: var(--pf-c-nav__horizontal-list-link--hover--after--BackgroundColor);
      }
    }

    &.pf-m-focus,
    &:focus {
      --pf-c-nav__horizontal-list-link--Color: var(--pf-c-nav__horizontal-list-link--focus--Color);

      &::after {
        background-color: var(--pf-c-nav__horizontal-list-link--focus--after--BackgroundColor);
      }
    }

    &.pf-m-active,
    &:active {
      --pf-c-nav__horizontal-list-link--Color: var(--pf-c-nav__horizontal-list-link--active--Color);

      &::after {
        background-color: var(--pf-c-nav__horizontal-list-link--active--after--BackgroundColor);
      }
    }

    &.pf-m-current {
      --pf-c-nav__horizontal-list-link--Color: var(--pf-c-nav__horizontal-list-link--m-current--Color);

      &::after {
        background-color: var(--pf-c-nav__horizontal-list-link--m-current--after--BackgroundColor);
      }
    }

    // After - border bottom treatment
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: var(--pf-c-nav__horizontal-list-link--after--Height);
      content: "";
    }
  }
}

// List tertiary
.pf-c-nav__tertiary-list {
  .pf-c-nav__item {
    margin-right: var(--pf-c-nav__tertiary-list-item--MarginRight);
  }

  // List tertiary link
  .pf-c-nav__link {
    padding-top: var(--pf-c-nav__tertiary-list-link--PaddingTop);
    padding-bottom: var(--pf-c-nav__tertiary-list-link--PaddingBottom);
    font-weight: var(--pf-c-nav__tertiary-list-link--FontWeight);
    color: var(--pf-c-nav__tertiary-list-link--Color);
    white-space: nowrap;

    // Hover
    &.pf-m-hover,
    &:hover {
      --pf-c-nav__tertiary-list-link--Color: var(--pf-c-nav__tertiary-list-link--hover--Color);

      &::after {
        background-color: var(--pf-c-nav__tertiary-list-link--hover--after--BackgroundColor);
      }
    }

    &.pf-m-focus,
    &:focus {
      --pf-c-nav__tertiary-list-link--Color: var(--pf-c-nav__tertiary-list-link--focus--Color);

      &::after {
        background-color: var(--pf-c-nav__tertiary-list-link--focus--after--BackgroundColor);
      }
    }

    &.pf-m-active,
    &:active {
      --pf-c-nav__tertiary-list-link--Color: var(--pf-c-nav__tertiary-list-link--active--Color);

      &::after {
        background-color: var(--pf-c-nav__tertiary-list-link--active--after--BackgroundColor);
      }
    }

    &.pf-m-current {
      --pf-c-nav__tertiary-list-link--Color: var(--pf-c-nav__tertiary-list-link--m-current--Color);

      &::after {
        background-color: var(--pf-c-nav__tertiary-list-link--m-current--after--BackgroundColor);
      }
    }

    // After - border bottom treatment
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: var(--pf-c-nav__tertiary-list-link--after--Height);
      content: "";
    }
  }
}

// Subnav
.pf-c-nav__subnav {
  flex: 1 0 100%;

  // Set default states
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: var(--pf-c-nav--Transition);

  // Hide scrollbars
  &::-webkit-scrollbar {
    display: none;
    visibility: hidden;
  }

  // Expanded list item
  .pf-c-nav__item.pf-m-expanded & {
    max-height: var(--pf-c-nav__subnav--MaxHeight);
    margin-top: var(--pf-c-nav__subnav--MarginTop);
    overflow-y: auto;
    opacity: 1;
  }
}

.pf-c-nav__section {
  margin-top: var(--pf-c-nav__section--MarginTop);

  + .pf-c-nav__section {
    --pf-c-nav__section--MarginTop: var(--pf-c-nav__section__section--MarginTop);
  }
}

// Section
.pf-c-nav__section-title {
  padding:
    var(--pf-c-nav__section-title--PaddingTop)
    var(--pf-c-nav__section-title--PaddingRight)
    var(--pf-c-nav__section-title--PaddingBottom)
    var(--pf-c-nav__section-title--PaddingLeft);
  font-size: var(--pf-c-nav__section-title--FontSize);
  font-weight: var(--pf-c-nav__section-title--FontWeight);
  color: var(--pf-c-nav__section-title--Color);
}

.pf-c-nav__scroll-button {
  position: absolute;
  top: var(--pf-c-nav__scroll-button--Top);
  bottom: 0;
  z-index: var(--pf-c-nav__scroll-button--ZIndex);
  width: var(--pf-c-nav__scroll-button--Width);
  height: var(--pf-c-nav__scroll-button--Height); // this fixes the positioning on FF
  padding-right: var(--pf-c-nav__scroll-button--PaddingRight);
  padding-left: var(--pf-c-nav__scroll-button--PaddingLeft);
  background-color: var(--pf-c-nav__scroll-button--BackgroundColor);
  border: 0;

  &.pf-m-hover,
  &:hover,
  &.pf-m-active,
  &:active,
  &.pf-m-focus,
  &:focus {
    color: var(--pf-c-nav__scroll-button--hover--Color);
  }

  &:nth-of-type(1) {
    left: 0;
    box-shadow: var(--pf-c-nav__scroll-button--nth-of-type-1--BoxShadow);
  }

  &:nth-of-type(2) {
    right: 0;
    box-shadow: var(--pf-c-nav__scroll-button--nth-of-type-2--BoxShadow);
  }
}
