/* stylelint-disable selector-max-type -- Copied from primer/react */
.TreeViewRootUlStyles {
  padding: 0;
  margin: 0;
  list-style: none;
  /*
   * WARNING: This is a performance optimization.
   *
   * We define styles for the tree items at the root level of the tree
   * to avoid recomputing the styles for each item when the tree updates.
   * We're sacrificing maintainability for performance because TreeView
   * needs to be performant enough to handle large trees (thousands of items).
   *
   * This is intended to be a temporary solution until we can improve the
   * performance of our styling patterns.
   *
   * Do NOT copy this pattern without understanding the tradeoffs.
   */
}
.TreeViewRootUlStyles .TreeViewItem {
    outline: none;
  }
:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible > div {
      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);
    }
@media (forced-colors: active) {
:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible > div {
        outline: 2px solid HighlightText;
        /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */
        outline-offset: -2;
    }
      }
[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem) {
      --has-leading-action: 1;
    }
.TreeViewRootUlStyles .TreeViewItemContainer {
    --level: 1;
    --toggle-width: 1rem;
    --min-item-height: 2rem;
    position: relative;
    display: grid;
    width: 100%;
    font-size: var(--text-body-size-medium);
    color: var(--fgColor-default);
    border-radius: var(--borderRadius-medium);
    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;
    grid-template-areas: 'spacer leadingAction toggle content';
    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);
    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));
  }
:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover {
      background-color: var(--control-transparent-bgColor-hover);
    }
@media (forced-colors: active) {
:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover {
        outline: 2px solid transparent;
        outline-offset: -2px;
    }
      }
@media (pointer: coarse) {
.TreeViewRootUlStyles .TreeViewItemContainer {
      --toggle-width: 1.5rem;
      --min-item-height: 2.75rem;
  }
    }
:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover {
      cursor: default;
      background-color: transparent;
    }
@media (forced-colors: active) {
:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover {
        outline: none;
    }
      }
:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role='treeitem']:focus-visible) {
      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);
    }
.TreeViewRootUlStyles:where([data-omit-spacer='true']) .TreeViewItemContainer {
    grid-template-columns: 0 0 0 1fr;
  }
/* stylelint-disable-next-line selector-max-specificity */
.TreeViewRootUlStyles .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']) {
    background-color: var(--control-transparent-bgColor-selected);
    /* Current item indicator */
    /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */
  }
:is(.TreeViewRootUlStyles .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']))::after {
      position: absolute;
      top: calc(50% - var(--base-size-12));
      left: calc(-1 * var(--base-size-8));
      width: 0.25rem;
      height: 1.5rem;
      content: '';
      /*
       * Use fgColor accent for consistency across all themes. Using the "correct" variable,
       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode
       */
      /* stylelint-disable-next-line primer/colors */
      background-color: var(--fgColor-accent);
      border-radius: var(--borderRadius-medium);
    }
@media (forced-colors: active) {
:is(.TreeViewRootUlStyles .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']))::after {
        background-color: HighlightText;
    }
      }
.TreeViewRootUlStyles .TreeViewItemToggle {
    display: flex;
    height: 100%;
    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap
    across more lines. */
    /* stylelint-disable-next-line primer/spacing */
    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);
    color: var(--fgColor-muted);
    grid-area: toggle;
    justify-content: center;
    align-items: flex-start;
    cursor: pointer;
  }
.TreeViewRootUlStyles .TreeViewItemToggleHover:hover {
    background-color: var(--control-transparent-bgColor-hover);
  }
.TreeViewRootUlStyles .TreeViewItemToggleEnd {
    border-top-left-radius: var(--borderRadius-medium);
    border-bottom-left-radius: var(--borderRadius-medium);
  }
/* stylelint-disable-next-line selector-no-qualifying-type */
.TreeViewRootUlStyles a.TreeViewItemContent:hover,.TreeViewRootUlStyles button.TreeViewItemContent:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: var(--control-fgColor-rest);
  }
.TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled="true"]) {
    cursor: not-allowed;
  }
.TreeViewRootUlStyles .TreeViewItemContent {
    display: flex;
    height: 100%;
    padding: 0 var(--base-size-8);
    outline: none;
    text-align: left;
    -webkit-user-select: none;
            user-select: none;
    background-color: transparent;
    border: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */
    /* stylelint-disable-next-line primer/spacing */
    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);
    /* stylelint-disable-next-line primer/spacing */
    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);
    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));
    grid-area: content;
    gap: var(--stack-gap-condensed);
  }
:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox {
      position: relative;
      color: var(--control-fgColor-rest);
      text-align: left;
      -webkit-user-select: none;
              user-select: none;
      background-color: transparent;
      border: none;
      border-radius: var(--borderRadius-medium);
      transition: background 33.333ms linear;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
[aria-checked='true']:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox {
        background: var(--control-checked-bgColor-rest);
        border-color: var(--control-checked-borderColor-rest);
        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */
      }
:is([aria-checked='true']:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox)::before {
          visibility: visible;
          transition: visibility 0s linear 0s;
          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
        }
[aria-checked='mixed']:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox {
        background: var(--control-checked-bgColor-rest);
        border-color: var(--control-checked-borderColor-rest);
        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */
      }
:is([aria-checked='mixed']:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox)::before {
          visibility: visible;
          mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
          clip-path: none;
        }
[aria-disabled='true']:is(.TreeViewRootUlStyles .TreeViewItemContent) {
      pointer-events: none;
    }
[aria-disabled='true']:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText {
        color: var(--control-fgColor-disabled);
      }
[aria-disabled='true']:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual {
        fill: var(--control-fgColor-disabled);
        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */
      }
:is([aria-disabled='true']:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg {
          fill: var(--control-fgColor-disabled);
        }
/* stylelint-disable-next-line max-nesting-depth */
@media (hover: hover) {
          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */
          :is([aria-disabled='true']:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover {
            cursor: not-allowed;
          }
        }
@media (hover: hover) {
        /* stylelint-disable-next-line max-nesting-depth */
        [aria-disabled='true']:is(.TreeViewRootUlStyles .TreeViewItemContent):hover {
          cursor: not-allowed;
          background-color: transparent;
        }
      }
.TreeViewRootUlStyles .TreeViewItemContentText {
    color: var(--control-fgColor-rest);
    flex: 1 1 auto;
    width: 0;
  }
.TreeViewRootUlStyles:where([data-truncate-text='true']) .TreeViewItemContentText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.TreeViewRootUlStyles:where([data-truncate-text='false']) .TreeViewItemContentText {
    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */
    word-break: break-word;
  }
.TreeViewRootUlStyles .TreeViewItemVisual {
    display: flex;
    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
    across more lines. */
    height: var(--custom-line-height, 1.3rem);
    color: var(--fgColor-muted);
    align-items: center;
  }
.TreeViewRootUlStyles .TreeViewItemLeadingAction {
    display: flex;
    color: var(--fgColor-muted);
    grid-area: leadingAction;
  }
:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
      flex-shrink: 1;
    }
.TreeViewRootUlStyles .TreeViewItemLevelLine {
    width: 100%;
    height: 100%;
    /*
     * On devices without hover, the nesting indicator lines
     * appear at all times.
     */
    border-color: var(--borderColor-muted);
    border-right: var(--borderWidth-thin) solid;
  }
/*
   * On devices with :hover support, the nesting indicator lines
   * fade in when the user mouses over the entire component,
   * or when there's focus inside the component. This makes
   * sure the component remains simple when not in use.
   */
@media (hover: hover) {
    .TreeViewRootUlStyles .TreeViewItemLevelLine {
      border-color: transparent;
    }
    .TreeViewRootUlStyles:hover .TreeViewItemLevelLine,.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine {
      border-color: var(--borderColor-muted);
    }
  }
.TreeViewRootUlStyles .TreeViewVisuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    /* stylelint-disable-next-line primer/spacing */
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
.TreeViewSkeletonItemContainerStyle {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  height: 2rem;
}
@media (pointer: coarse) {
.TreeViewSkeletonItemContainerStyle {
    height: 2.75rem;
}
  }
.TreeViewSkeletonItemContainerStyle:nth-of-type(5n + 1) {
    --tree-item-loading-width: 67%;
  }
.TreeViewSkeletonItemContainerStyle:nth-of-type(5n + 2) {
    --tree-item-loading-width: 47%;
  }
.TreeViewSkeletonItemContainerStyle:nth-of-type(5n + 3) {
    --tree-item-loading-width: 73%;
  }
.TreeViewSkeletonItemContainerStyle:nth-of-type(5n + 4) {
    --tree-item-loading-width: 64%;
  }
.TreeViewSkeletonItemContainerStyle:nth-of-type(5n + 5) {
    --tree-item-loading-width: 50%;
  }
.TreeItemSkeletonTextStyles {
  width: var(--tree-item-loading-width, 67%);
}
.TreeViewFailureMessage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  width: 100%;
  align-items: center;
}