ul[role="tree"] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 120%;
}

    ul[role="tree"] li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

[role="treeitem"][aria-expanded="false"] + [role="group"] {
    display: none;
}

[role="treeitem"][aria-expanded="true"] + [role="group"] {
    display: block;
}

[role="treeitem"].doc::before {
    font-family: "Material Symbols Outlined";
    content: "\e873";
    display: inline-block;
    padding-right: 2px;
    padding-left: 5px;
    vertical-align: middle;
}

[role="treeitem"][aria-expanded="false"] > ul {
    display: none;
}

[role="treeitem"][aria-expanded="true"] > ul {
    display: block;
}

[role="treeitem"][aria-expanded="false"] > span::before {
    font-family: "Material Symbols Outlined";
    content: "\e2c7";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

[role="treeitem"][aria-expanded="true"] > span::before {
    font-family: "Material Symbols Outlined";
    content: "\e2c8";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

[role="treeitem"],
[role="treeitem"] span {
    margin: 0;
    padding: 0.125em;
    display: block;
}

    /* disable default keyboard focus styling for treeitems
   Keyboard focus is styled with the following CSS */
    [role="treeitem"]:focus {
        outline: 0;
    }

    [role="treeitem"][aria-selected="true"] {
        padding-left: 4px;
        border-left: 5px solid #005a9c;
    }

    [role="treeitem"].focus,
    [role="treeitem"] span.focus {
        border-color: black;
        background-color: #eee;
    }

    [role="treeitem"].hover,
    [role="treeitem"] span:hover {
        padding-left: 4px;
        background-color: #ddd;
        border-left: 5px solid #333;
    }