src/renderer/components/directoryTree/directoryTree.scss
.tree {
    height: 100%;
    width: 100%;

    .controlBar {
        height: 24px;
        width: 100%;

        border-bottom: 1px solid $borderColor;
        padding: 0 8px;
        display: flex;
        align-items: center;

        .button {
            cursor: pointer;
            transition: 0.2s;
            margin-right: 12px;
        }

        .button:hover {
            cursor: pointer;
            transition: 0s;
            color: $fontColorActive;
        }
    }

    .treeRootWrapper {
        height: calc(100% - 24px - 37px);
        width: 100%;
        overflow: scroll;
    }
}

.treeRoot {
    padding: 8px 8px 50px 8px;
    width: 100%;

    .nodeRoot {
        user-select: none;

        .nodeRootTitleWrapper {
            display: flex;
            align-items: center;
            padding: 2px 4px;
            border-radius: 4px;
            cursor: pointer;
            transition: 0.2s ease-in-out;
            position: relative;

            .icon {
                padding-right: 8px;
            }

            .nodeRootTitle {
                width: 85%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-all;
                padding-bottom: 1px;
            }

            .closeButton {
                display: none;
                position: absolute;
                right: 10px;
                height: 100%;
                width: 30px;
                justify-content: center;
                align-items: center;
            }
        }
        .nodeRootTitleWrapper:hover {
            background-color: rgba(255, 255, 255, 0.7);
            color: $fontColorHover;
            transition: 0s;

            .closeButton {
                display: flex;
            }
        }

        .nodeRootTitleWrapper.selected {
            background-color: #fff;
            color: $fontColorActive;
            transition: 0s;
        }

        .nodeRootChildren {
            padding-left: 28px;
        }
    }

    .nodeRoot.hidden {
        display: none;
    }

    .nodeLeaf {
        display: flex;
        align-items: center;

        .icon {
            padding-right: 8px;
        }
    }

    .nodeLeaf:hover {
        background-color: rgb(34, 165, 241);
    }
}

.searchInput {
    width: 100%;
    input {
        width: 100%;
        font-size: inherit;
        border: none;
        border-bottom: 1px solid $borderColor;
        padding: 0 8px;
        background-color: rgba(0, 0, 0, 0);
        outline: none;
        color: $tagFontColor;
        margin: 7px 0px 7px 0;
    }

    input::-webkit-input-placeholder {
        color: $tagFontColor;
    }
}
