*[role=tree] {
  padding-left: 6px;

  details[role=treeitem] {
    > summary {

      white-space: nowrap;
      vertical-align: top;
      line-height: 20px;
      list-style-type: "\f63f";

      &::marker {
        font-family: var( --huey-icon-font-family ) !important;
        font-size: var( --huey-icon-small );
        color: var( --huey-icon-color-subtle );
      }

      &:hover {
        background-color: var( --huey-light-background-color );

        &::marker {
          color: var( --huey-icon-color-highlight );
        }

      }

      > *.icon {
        display: inline-block;
        font-family: var( --huey-icon-font-family ) !important;
        font-size: var( --huey-icon-medium );
        color: var( --huey-icon-color );
        width: 24px;
        padding: 6px 3px 0px 3px;
        text-align: center;
      }

      > *.label {
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        overflow: hidden;
        vertical-align: text-bottom;
      }
    }

    &[open] > summary {
      list-style-type: "\f63e";
    }

    > details[role=treeitem] {
      margin-left: 24px;
    }
  }

}