$pf-c-tree-view--MaxNesting: 10;

.pf-c-tree-view {
  --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);

  // Node base
  --pf-c-tree-view__node--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-tree-view__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
  --pf-c-tree-view__node--nested-indent--base: calc(var(--pf-c-tree-view__node--indent--base) - var(--pf-global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it

  // Node
  --pf-c-tree-view__node--PaddingTop--base: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view__node--PaddingTop--base);
  --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
  --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
  --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
  --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);

  // Container
  --pf-c-tree-view__node-container--Display: contents;

  // Content
  --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node-content--Overflow: visible;

  // Link hover/focus
  --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);

  // Nested toggle
  --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
  --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
  --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;

  // Toggle
  --pf-c-tree-view__node-toggle--Position: absolute;

  // Toggle icon
  --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
  --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
  --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
  --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
  --pf-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);

  // Check
  --pf-c-tree-view__node-check--MarginRight: var(--pf-global--spacer--sm);

  // Badge
  --pf-c-tree-view__node-count--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);

  // Search
  --pf-c-tree-view__search--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-tree-view__search--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__search--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-tree-view__search--PaddingLeft: var(--pf-global--spacer--sm);

  // Icon
  --pf-c-tree-view__node-icon--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-tree-view__node-icon--Color: var(--pf-global--icon--Color--light);
  --pf-c-tree-view__node-toggle-icon--base--Rotate: 0;
  --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
  --pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;

  // Text
  --pf-c-tree-view__node-text--max-lines: 1;

  // Title
  --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);

  // Action
  --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
  --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
  --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
  --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);

  // Guides
  // ================================================================== //
  --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base); // starting value, this gets updated for each nesting level

  // Base
  --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
  --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
  --pf-c-tree-view--m-guides--guide-left--base: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides__list-node--guide-width--base));
  --pf-c-tree-view--m-guides--guide-left--base--offset: calc(var(--pf-c-tree-view__list-item__list-item__node-toggle--Left) + var(--pf-c-tree-view__node-toggle-icon--MinWidth) / 2); // based on toggle positioning
  --pf-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-global--spacer--lg);

  // List item
  --pf-c-tree-view--m-guides__list-item--before--Top: 0;
  --pf-c-tree-view--m-guides__list-item--before--Width: var(--pf-c-tree-view--m-guides--guide-width--base);
  --pf-c-tree-view--m-guides__list-item--before--Height: 100%;
  --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
  --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
  --pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);

  // Node
  --pf-c-tree-view--m-guides__node--before--Width: #{pf-size-prem(16px)};
  --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
  --pf-c-tree-view--m-guides__node--before--Top: #{pf-size-prem(18px)};
  --pf-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);

  // Compact
  // ================================================================== //
  // Base
  --pf-c-tree-view--m-compact--base-border--Left--offset: var(--pf-global--spacer--md);
  --pf-c-tree-view--m-compact--base-border--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
  --pf-c-tree-view--m-compact__node--indent--base: var(--pf-c-tree-view__node--indent--base); // based off of the expected width of the toggle button
  --pf-c-tree-view--m-compact__node--nested-indent--base: var(--pf-global--spacer--lg);
  --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--base-border--Left);

  // Node
  --pf-c-tree-view--m-compact__node--PaddingTop: 0;
  --pf-c-tree-view--m-compact__node--PaddingBottom: 0;
  --pf-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-global--spacer--sm);

  // Node toggle
  --pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop));

  // List item
  --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
  --pf-c-tree-view--m-compact__list-item--before--Top: 0;
  --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__node--before--Top);
  --pf-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-c-tree-view__node--PaddingTop--base) * -1);
  --pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-c-tree-view--m-compact__node--before--Top) + var(--pf-c-tree-view__node--PaddingTop--base));

  // Node
  --pf-c-tree-view--m-compact__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);
  --pf-c-tree-view--m-compact__node--before--Top: calc(var(--pf-c-tree-view--m-compact__node-container--PaddingTop) + var(--pf-c-tree-view--m-compact__node--nested--PaddingTop) + #{pf-size-prem(4px)});
  --pf-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-c-tree-view--m-compact__node--indent--base);

  // Node toggle
  --pf-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -.5);
  --pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-c-tree-view__node-toggle-button--PaddingLeft) * -1.5);

  // Node container
  --pf-c-tree-view--m-compact__node-container--Display: flex;
  --pf-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-global--spacer--lg);
  --pf-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base);
  --pf-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-global--spacer--xs);
  --pf-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-global--BackgroundColor--200);
  --pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;

  // Background transparent
  --pf-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;

  // Compact, no background
  // ================================================================== //
  --pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-global--spacer--sm);
  --pf-c-tree-view--m-compact--m-no-background--base-border--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
  --pf-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-c-tree-view__node--indent--base); // based off of the expected width of the toggle button
  --pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-global--spacer--2xl);
  --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
  --pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
  --pf-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-c-tree-view--m-compact__node--nested--PaddingTop) + #{pf-size-prem(4px)});

  padding-top: var(--pf-c-tree-view--PaddingTop);
  padding-bottom: var(--pf-c-tree-view--PaddingBottom);

  &.pf-m-compact,
  &.pf-m-guides {
    .pf-c-tree-view__list-item {
      position: relative;

      .pf-c-tree-view__list-item {
        // stylelint-disable max-nesting-depth, selector-max-class
        &::before,
        .pf-c-tree-view__node::before {
          position: absolute;
          left: var(--pf-c-tree-view--m-guides--guide--Left);
          content: "";
        }

        // vertical border
        &::before {
          top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
          width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
          height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
          background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);
        }

        // horizontal border
        .pf-c-tree-view__node::before {
          top: var(--pf-c-tree-view--m-guides__node--before--Top);
          width: var(--pf-c-tree-view--m-guides__node--before--Width);
          height: var(--pf-c-tree-view--m-guides__node--before--Height);
          background-color: var(--pf-c-tree-view--m-guides__node--before--BackgroundColor);
        }

        &:last-child::before {
          height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Height);
        }

        .pf-c-tree-view__list-item {
          --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--border--nested--Left); // swap with nested value
        }
        // stylelint-enable
      }

      &:last-child {
        --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0; // hide nested list item bottom borders
      }
    }
  }

  &.pf-m-compact {
    --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--PaddingTop);
    --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--PaddingBottom);
    --pf-c-tree-view__node-container--Display: var(--pf-c-tree-view--m-compact__node-container--Display);
    --pf-c-tree-view__node--hover--BackgroundColor: transparent;
    --pf-c-tree-view__node--focus--BackgroundColor: transparent;
    --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view--m-compact__list-item__list-item__node-toggle--Top);

    // Level 1
    .pf-c-tree-view__list-item {
      border-bottom: var(--pf-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-c-tree-view--m-compact__list-item--BorderBottomColor);

      &.pf-m-expanded {
        --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom);
      }

      // Level 2
      .pf-c-tree-view__list-item {
        --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact__node--nested--PaddingTop);
        --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact__node--nested--PaddingBottom);
        --pf-c-tree-view__node-toggle--Position: static;
        --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--level-2--PaddingLeft); // second+ nested child padding left
        --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: 0;
        --pf-c-tree-view--m-compact__list-item--BorderBottomWidth: 0; // hide nested list item bottom borders
        --pf-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-c-tree-view--m-compact__node-container--PaddingBottom--base); // reset expanded node container padding

        // stylelint-disable max-nesting-depth, selector-max-class
        &::before,
        .pf-c-tree-view__node::before {
          left: var(--pf-c-tree-view--m-compact--border--Left);
        }

        &::before {
          top: var(--pf-c-tree-view--m-compact__list-item--before--Top);
        }

        .pf-c-tree-view__node::before {
          top: var(--pf-c-tree-view--m-compact__node--before--Top);
        }

        &:last-child::before {
          height: var(--pf-c-tree-view--m-compact__list-item--last-child--before--Height);
        }

        // Level 3
        .pf-c-tree-view__list-item {
          --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact__node--PaddingLeft); // second+ nested child padding left
          --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--border--nested--Left);
          --pf-c-tree-view--m-compact__list-item--before--Top: var(--pf-c-tree-view--m-compact__list-item--nested--before--Top);
          --pf-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-c-tree-view--m-compact__list-item--nested--last-child--before--Height);
        }

        .pf-c-tree-view__node-container {
          padding: var(--pf-c-tree-view--m-compact__node-container--nested--PaddingTop) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingRight) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingBottom) var(--pf-c-tree-view--m-compact__node-container--nested--PaddingLeft);
          background-color: var(--pf-c-tree-view--m-compact__node-container--nested--BackgroundColor);
        }

        // add margins to align item text flush left and offset gap between toggle and text
        .pf-c-tree-view__node-toggle {
          margin-right: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginRight);
          margin-left: var(--pf-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
        }
        // stylelint-enable
      }
    }

    .pf-c-tree-view__node-container {
      padding: var(--pf-c-tree-view--m-compact__node-container--PaddingTop) var(--pf-c-tree-view--m-compact__node-container--PaddingRight) var(--pf-c-tree-view--m-compact__node-container--PaddingBottom) var(--pf-c-tree-view--m-compact__node-container--PaddingLeft);
    }

    // stylelint-disable selector-max-class, selector-max-compound-selectors
    .pf-c-tree-view__list-item:not([aria-expanded]) > .pf-c-tree-view__content {
      > .pf-c-tree-view__node,
      > .pf-c-tree-view__node > .pf-c-tree-view__node-container {
        cursor: default;
      }
    }
    // stylelint-enable

    &.pf-m-no-background {
      --pf-c-tree-view--m-compact__node--before--Top: var(--pf-c-tree-view--m-compact--m-no-background__node--before--Top);

      // stylelint-disable max-nesting-depth, selector-max-class
      .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
        --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop);
        --pf-c-tree-view__node--PaddingBottom: var(--pf-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom);
      }

      // level 3
      .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
        --pf-c-tree-view--m-compact--border--Left: var(--pf-c-tree-view--m-compact--m-no-background--border--nested--Left);
        --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft); // third+ nested child padding left
      }
      // stylelint-enable
    }
  }

  &.pf-m-no-background {
    --pf-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-c-tree-view--m-no-background__node-container--BackgroundColor);
  }
}

.pf-c-tree-view__node-toggle-icon {
  display: inline-block;
  min-width: var(--pf-c-tree-view__node-toggle-icon--MinWidth);
  text-align: center;
  transition: var(--pf-c-tree-view__node-toggle-icon--Transition);
  transform: rotate(var(--pf-c-tree-view__node-toggle-icon--Rotate));
}

// stylelint-disable
.pf-c-tree-view__list-item {
  .pf-c-tree-view__list-item {
    --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate); // reset nested icons
  }

  &.pf-m-expanded {
    --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
  }
}
// stylelint-enable

.pf-c-tree-view__node,
.pf-c-tree-view__node-container {
  flex: 1 1;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  border: 0;
}

.pf-c-tree-view__node {
  position: relative;
  display: flex;
  padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
  color: var(--pf-c-tree-view__node--Color);

  &.pf-m-current {
    --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);

    font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
  }

  &:focus {
    background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
  }

  .pf-c-tree-view__node-count {
    margin-left: var(--pf-c-tree-view__node-count--MarginLeft);

    .pf-c-badge.pf-m-read {
      --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
    }
  }
}

.pf-c-tree-view__node-container {
  display: var(--pf-c-tree-view__node-container--Display);
  flex-grow: 1;
}

.pf-c-tree-view__node-content {
  display: flex;
  flex-direction: column;
  overflow: var(--pf-c-tree-view__node-content--Overflow);

  // row-gap: var(--pf-c-tree-view__node-content--RowGap); update when gap for flex is supported
  > * + * {
    margin-top: var(--pf-c-tree-view__node-content--RowGap);
  }
}

.pf-c-tree-view__node-check {
  margin-right: var(--pf-c-tree-view__node-check--MarginRight);
}

.pf-c-tree-view__node-toggle {
  position: var(--pf-c-tree-view__node-toggle--Position);
  top: var(--pf-c-tree-view__list-item__list-item__node-toggle--Top);
  left: var(--pf-c-tree-view__list-item__list-item__node-toggle--Left);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pf-c-tree-view__node-toggle-button--PaddingTop) var(--pf-c-tree-view__node-toggle-button--PaddingRight) var(--pf-c-tree-view__node-toggle-button--PaddingBottom) var(--pf-c-tree-view__node-toggle-button--PaddingLeft);
  margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
  margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
  border: 0;
  transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
}

.pf-c-tree-view__node-title,
.pf-c-tree-view__node-text {
  &.pf-m-truncate {
    --pf-c-tree-view__node-content--Overflow: hidden;

    @include pf-text-overflow;
  }

  @at-root .pf-c-tree-view.pf-m-truncate & {
    --pf-c-tree-view__node-content--Overflow: hidden;

    @include pf-text-overflow;
  }
}

.pf-c-tree-view__node-title {
  font-weight: var(--pf-c-tree-view__node-title--FontWeight);
}

.pf-c-tree-view__search {
  padding: var(--pf-c-tree-view__search--PaddingTop) var(--pf-c-tree-view__search--PaddingRight) var(--pf-c-tree-view__search--PaddingBottom) var(--pf-c-tree-view__search--PaddingLeft);
}

.pf-c-tree-view__node-icon {
  padding-right: var(--pf-c-tree-view__node-icon--PaddingRight);
  color: var(--pf-c-tree-view__node-icon--Color);
}

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

.pf-c-tree-view__content:hover,
.pf-c-tree-view__content:focus-within {
  background-color: var(--pf-c-tree-view__node--hover--BackgroundColor);
}

.pf-c-tree-view__action {
  margin-left: var(--pf-c-tree-view__action--MarginLeft);
  color: var(--pf-c-tree-view__action--Color);
  border: 0;

  &:hover {
    --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
  }

  &:focus {
    --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);

    background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
  }
}

// stylelint-disable no-duplicate-selectors
.pf-c-tree-view__list-item {
  $root: &;
  $nested-item: &;

  @for $i from 1 through $pf-c-tree-view--MaxNesting {
    #{$nested-item} {
      --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
      --pf-c-tree-view__node--PaddingLeft: calc(var(--pf-c-tree-view__node--nested-indent--base) * #{$i} + var(--pf-c-tree-view__node--indent--base));
      --pf-c-tree-view--m-guides--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-guides--guide-left--base--offset));

      @if $i > 1 {
        --pf-c-tree-view--m-compact__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact__node--nested-indent--base) * #{$i - 1} + var(--pf-c-tree-view--m-compact__node--indent--base));
        --pf-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--base-border--Left--offset));
        --pf-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * #{$i - 1} + var(--pf-c-tree-view--m-compact--m-no-background__node--indent--base));
        --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
      }
    }

    $nested-item: $nested-item + " " + $root;
  }
}
// stylelint-enable