

.pf-c-nav {
  --pf-c-nav--Width: #{pf-size-prem(290px)};
  --pf-c-nav--Transition: var(--pf-global--Transition);

  // 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--xl);
  --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--xl);

  // 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);

  // background color
  --pf-c-nav__list-link--BackgroundColor: transparent;
  --pf-c-nav__list-link--hover--BackgroundColor: transparent;
  --pf-c-nav__list-link--active--BackgroundColor: transparent;
  --pf-c-nav__list-link--focus--BackgroundColor: transparent;

  // after
  --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--after--BackgroundColor: transparent;
  --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);

  // hardcoding border bottom to match design spec
  --pf-c-nav__list-link--after--Width: 3.125rem;
  --pf-c-nav__list-link--after--Height: 3px;

  // 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--xl);
  --pf-c-nav__simple-list-link--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav__simple-list-link--PaddingLeft: var(--pf-global--spacer--xl);

  // 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--BackgroundColor: transparent;
  --pf-c-nav__simple-list-link--hover--BackgroundColor: #{$pf-color-black-150};
  --pf-c-nav__simple-list-link--active--BackgroundColor: #{$pf-color-black-150};
  --pf-c-nav__simple-list-link--focus--BackgroundColor: #{$pf-color-black-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--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);

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

  // color
  --pf-c-nav__horizontal-list-link--Color: #{$pf-color-black-300};
  --pf-c-nav__horizontal-list-link--hover--Color: var(--pf-global--active-color--300);
  --pf-c-nav__horizontal-list-link--active--Color: var(--pf-global--active-color--300);
  --pf-c-nav__horizontal-list-link--focus--Color: var(--pf-global--active-color--300);

  // background
  --pf-c-nav__horizontal-list-link--BackgroundColor: transparent;
  --pf-c-nav__horizontal-list-link--hover--BackgroundColor: transparent;
  --pf-c-nav__horizontal-list-link--active--BackgroundColor: transparent;
  --pf-c-nav__horizontal-list-link--focus--BackgroundColor: transparent;

  // after
  --pf-c-nav__horizontal-list-link--after--Height: 3px;
  --pf-c-nav__horizontal-list-link--after--BackgroundColor: transparent;
  --pf-c-nav__horizontal-list-link--hover--after--BackgroundColor: var(--pf-global--active-color--300);
  --pf-c-nav__horizontal-list-link--active--after--BackgroundColor: var(--pf-global--active-color--300);
  --pf-c-nav__horizontal-list-link--focus--after--BackgroundColor: var(--pf-global--active-color--300);

  // List tertiary
  --pf-c-nav__tertiary-list--Padding: var(--pf-global--spacer--md);
  --pf-c-nav__tertiary-list--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
  --pf-c-nav__tertiary-list--BackgroundColor: var(--pf-global--BackgroundColor--100);

  // 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--link--normal);
  --pf-c-nav__tertiary-list-link--active--FontWeight: var(--pf-global--FontWeight--bold);
  --pf-c-nav__tertiary-list-link--focus--FontWeight: var(--pf-global--FontWeight--bold);

  // 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);

  // background
  --pf-c-nav__tertiary-list-link--BackgroundColor: transparent;
  --pf-c-nav__tertiary-list-link--hover--BackgroundColor: transparent;
  --pf-c-nav__tertiary-list-link--active--BackgroundColor: transparent;
  --pf-c-nav__tertiary-list-link--focus--BackgroundColor: transparent;

  // after
  --pf-c-nav__tertiary-list-link--after--Height: 3px;
  --pf-c-nav__tertiary-list-link--after--BackgroundColor: transparent;
  --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: #{pf-size-prem(600px)};
  --pf-c-nav__subnav-item--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-nav__subnav-item--md--PaddingLeft: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--md));

  // 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: .1s ease-in-out;

  // Nav section
  --pf-c-nav__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--xl);
  --pf-c-nav__section-title--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-nav__section-title--PaddingLeft: var(--pf-global--spacer--xl);

  // Nav section title fonts
  --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);

  // ============================================================ //
  // 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--BackgroundColor: transparent;
  --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: #{$pf-color-black-150};

  // Modifier - current item
  --pf-c-nav__list-horizontal-link--m-current--Color: var(--pf-global--active-color--300);
  --pf-c-nav__list-horizontal-link--m-current--FontWeight: var(--pf-global--FontWeight--bold);
  --pf-c-nav__list-horizontal-link--m-current--BackgroundColor: transparent;
  --pf-c-nav__list-horizontal-link--m-current--after--BackgroundColor: var(--pf-global--active-color--300);

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

  // Base styling
  overflow-x: auto;

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

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

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

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

  // 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);

    @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);
    }

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

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

    &.pf-m-active,
    &:active {
      font-weight: var(--pf-c-nav__list-link--active--FontWeight);
      color: var(--pf-c-nav__list-link--active--Color);
      background-color: var(--pf-c-nav__list-link--active--BackgroundColor);

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

    &.pf-m-focus,
    &:focus {
      font-weight: var(--pf-c-nav__list-link--focus--FontWeight);
      color: var(--pf-c-nav__list-link--focus--Color);
      background-color: var(--pf-c-nav__list-link--focus--BackgroundColor);

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

    // After - border bottom treatment
    &::after {
      position: absolute;
      bottom: 0;
      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: "";
      background-color: var(--pf-c-nav__list-link--after--BackgroundColor);

      @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);
      }
    }
  }

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

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


// 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: rotate(90deg);
}


// 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 {
  // 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);
    background-color: var(--pf-c-nav__simple-list-link--BackgroundColor);

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

    &.pf-m-focus,
    &:focus {
      font-weight: var(--pf-c-nav__simple-list-link--focus--FontWeight);
      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 {
      font-weight: var(--pf-c-nav__simple-list-link--active--FontWeight);
      color: var(--pf-c-nav__simple-list-link--active--Color);
      background-color: var(--pf-c-nav__simple-list-link--active--BackgroundColor);
    }

    &.pf-m-current {
      font-weight: var(--pf-c-nav__simple-list-link--m-current--FontWeight);
      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 & {
      padding-left: var(--pf-c-nav__subnav-item--PaddingLeft);

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

    // If child of list, hide bottom border treatment
    &::after {
      display: none;
    }
  }
}

// Horizontal and tertiary nav
.pf-c-nav__horizontal-list,
.pf-c-nav__tertiary-list {
  display: inline-flex;

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

// List horizontal, masthead
.pf-c-nav__horizontal-list {
  .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;
    background-color: var(--pf-c-nav__horizontal-list-link--BackgroundColor);

    @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);
    }

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

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

    &.pf-m-focus,
    &:focus {
      font-weight: var(--pf-c-nav__horizontal-list-link--focus--FontWeight);
      color: var(--pf-c-nav__horizontal-list-link--focus--Color);
      background-color: var(--pf-c-nav__horizontal-list-link--focus--BackgroundColor);

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

    &.pf-m-active,
    &:active {
      font-weight: var(--pf-c-nav__horizontal-list-link--active--FontWeight);
      color: var(--pf-c-nav__horizontal-list-link--active--Color);
      background-color: var(--pf-c-nav__horizontal-list-link--active--BackgroundColor);

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

    &.pf-m-current {
      font-weight: var(--pf-c-nav__list-horizontal-link--m-current--FontWeight);
      color: var(--pf-c-nav__list-horizontal-link--m-current--Color);
      background-color: var(--pf-c-nav__list-horizontal-link--m-current--BackgroundColor);

      &::after {
        background-color: var(--pf-c-nav__list-horizontal-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: "";
      background-color: var(--pf-c-nav__horizontal-list-link--after--BackgroundColor);
    }
  }
}

// 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;
    background-color: var(--pf-c-nav__tertiary-list-link--BackgroundColor);

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

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

    &.pf-m-focus,
    &:focus {
      font-weight: var(--pf-c-nav__tertiary-list-link--focus--FontWeight);
      color: var(--pf-c-nav__tertiary-list-link--focus--Color);
      background-color: var(--pf-c-nav__tertiary-list-link--focus--BackgroundColor);

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

    &.pf-m-active,
    &:active {
      font-weight: var(--pf-c-nav__tertiary-list-link--active--FontWeight);
      color: var(--pf-c-nav__tertiary-list-link--active--Color);
      background-color: var(--pf-c-nav__tertiary-list-link--active--BackgroundColor);

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

    &.pf-m-current {
      font-weight: var(--pf-c-nav__list-tertiary-link--m-current--FontWeight);
      color: var(--pf-c-nav__list-tertiary-link--m-current--Color);
      background-color: var(--pf-c-nav__list-tertiary-link--m-current--BackgroundColor);

      &::after {
        background-color: var(--pf-c-nav__list-tertiary-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: "";
      background-color: var(--pf-c-nav__tertiary-list-link--after--BackgroundColor);
    }
  }
}

// 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;
  }

  // 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 + .pf-c-nav__section {
  margin-top: var(--pf-c-nav__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);
}
