$pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");

.pf-c-jump-links {
  // list
  --pf-c-jump-links__list--Display: flex;
  --pf-c-jump-links__list--Visibility: visible;
  --pf-c-jump-links__list--PaddingTop: 0;
  --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-jump-links__list--PaddingBottom: 0;
  --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
  --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
  --pf-c-jump-links__list--FlexDirection: row;
  --pf-c-jump-links--m-vertical__list--FlexDirection: column;
  --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
  --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-jump-links__list--before--BorderRightWidth: 0;
  --pf-c-jump-links__list--before--BorderBottomWidth: 0;
  --pf-c-jump-links__list--before--BorderLeftWidth: 0;
  --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
  --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);

  // link
  --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));

  // before
  --pf-c-jump-links__link--before--BorderTopWidth: 0;
  --pf-c-jump-links__link--before--BorderRightWidth: 0;
  --pf-c-jump-links__link--before--BorderBottomWidth: 0;
  --pf-c-jump-links__link--before--BorderLeftWidth: 0;
  --pf-c-jump-links__link--before--BorderColor: transparent;
  --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
  --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
  --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
  --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);

  // text
  --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
  --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
  --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
  --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);

  // label
  --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-jump-links__label--Display: block;
  --pf-c-jump-links__label--Visibility: visible;

  // toggle
  --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
  --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
  --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
  --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
  --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
  --pf-c-jump-links__toggle--Display: none;
  --pf-c-jump-links__toggle--Visibility: hidden;

  // toggle icon
  --pf-c-jump-links__toggle-icon--Color: currentColor;
  --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
  --pf-c-jump-links__toggle-icon--Rotate: 0;
  --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
  --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;

  // toggle text
  --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);

  display: flex;

  &.pf-m-center {
    justify-content: center;

    .pf-c-jump-links__main {
      align-items: center;
    }
  }

  &.pf-m-vertical,
  &.pf-m-expandable {
    --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
    --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
    --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
    --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
    --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
    --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
    --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
    --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
    --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);

    flex-direction: column;
  }

  @each $breakpoint, $breakpoint-value in $pf-c-jump-links--m-expandable--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @include pf-apply-breakpoint($breakpoint) {
      &.pf-m-expandable#{$breakpoint-name} {
        --pf-c-jump-links__list--Display: none;
        --pf-c-jump-links__list--Visibility: hidden;
        --pf-c-jump-links__toggle--Display: block;
        --pf-c-jump-links__toggle--Visibility: visible;
        --pf-c-jump-links__label--Display: none;
        --pf-c-jump-links__label--Visibility: hidden;
      }

      &.pf-m-non-expandable#{$breakpoint-name} {
        --pf-c-jump-links__list--Display: flex;
        --pf-c-jump-links__list--Visibility: visible;
        --pf-c-jump-links__toggle--Display: none;
        --pf-c-jump-links__toggle--Visibility: hidden;
        --pf-c-jump-links__label--Display: block;
        --pf-c-jump-links__label--Visibility: visible;
      }
    }
  }

  &.pf-m-expanded {
    --pf-c-jump-links__list--Display: flex;
    --pf-c-jump-links__list--Visibility: visible;
    --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
    --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
    --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
  }
}

.pf-c-jump-links__list {
  position: relative;
  display: var(--pf-c-jump-links__list--Display);
  flex-direction: var(--pf-c-jump-links__list--FlexDirection);
  padding-top: var(--pf-c-jump-links__list--PaddingTop);
  padding-right: var(--pf-c-jump-links__list--PaddingRight);
  padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
  padding-left: var(--pf-c-jump-links__list--PaddingLeft);
  visibility: var(--pf-c-jump-links__list--Visibility);

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    content: "";
    border: solid var(--pf-c-jump-links__list--before--BorderColor);
    border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
  }

  .pf-c-jump-links__list {
    --pf-c-jump-links__list--PaddingTop: 0;
    --pf-c-jump-links__list--PaddingBottom: 0;
    --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
    --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
    --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);

    margin-top: var(--pf-c-jump-links__list__list--MarginTop);
  }
}

.pf-c-jump-links__link {
  position: relative;
  display: flex;
  flex: 1;
  padding-top: var(--pf-c-jump-links__link--PaddingTop);
  padding-right: var(--pf-c-jump-links__link--PaddingRight);
  padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
  padding-left: var(--pf-c-jump-links__link--PaddingLeft);
  text-decoration: none;
  outline-offset: var(--pf-c-jump-links__link--OutlineOffset);

  &:hover {
    --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
  }

  &:focus {
    --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
  }

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    content: "";
    border-color: var(--pf-c-jump-links__link--before--BorderColor);
    border-style: solid;
    border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
  }
}

// stylelint-disable
.pf-c-jump-links__item {
  --pf-c-jump-links__list--before--BorderColor: transparent;

  &.pf-m-current > .pf-c-jump-links__link {
    --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
    --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
    --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
    --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
  }
}
// stylelint-enable

.pf-c-jump-links__link-text {
  color: var(--pf-c-jump-links__link-text--Color);
}

.pf-c-jump-links__label {
  display: var(--pf-c-jump-links__label--Display);
  margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
  visibility: var(--pf-c-jump-links__label--Visibility);
}

.pf-c-jump-links__main {
  display: flex;
  flex-direction: column;
}

.pf-c-jump-links__toggle {
  display: var(--pf-c-jump-links__toggle--Display);
  margin-top: var(--pf-c-jump-links__toggle--MarginTop);
  margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
  margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
  visibility: var(--pf-c-jump-links__toggle--Visibility);

  .pf-c-button {
    display: flex;
    align-items: center;
  }
}

.pf-c-jump-links__toggle-icon {
  display: inline-block;
  color: var(--pf-c-jump-links__toggle-icon--Color);
  transition: var(--pf-c-jump-links__toggle-icon--Transition);
  transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
}

.pf-c-jump-links__toggle-text {
  margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
  color: var(--pf-c-jump-links__toggle-text--Color);
}