.epic-tree {
    .epic-tree-main {
        padding-right: 10px;
    }
    ul {
        padding: 0;
        list-style: none;
    }
    a {
        display: flex;
        color: var(--epic-text-main);
        &:hover {
            color: var(--epic-text-main);
        }
        .text {
            display: inline-block;
            width: 100%;
            &.hover {
                background-color: var(--epic-widget-hover-color);
            }
            &.checked {
                color: var(--epic-primary-color);
                background: var(--epic-primary-hover-color);
            }
            .epic-text-padding {
                padding: 0 6px;
                color: var(--epic-text-main);
                white-space: nowrap;
            }
        }
    }
    .epic-node-type-text {
        margin-left: 6px;
        font-size: var(--epic-text-sm);
        color: var(--epic-text-disabled);
    }
    .epic-tree-node {
        &.level-1 {
            padding-left: 10px;
        }

        min-height: 30px;
        padding-left: 16px;
        line-height: 30px;
        cursor: pointer;
        .icon-expanded {
            position: absolute;
            left: 8px;
            font-size: var(--epic-text-sm);
            color: var(--epic-border-color);
            transition: transform 0.3s;
            &.expanded {
                transform: rotate(90deg);
            }
        }
    }
    .epic-tree-sublist {
        height: 0;
        overflow: hidden;
        &.expanded {
            height: auto;
        }
        .epic-tree-node {
            position: relative;
            &::after,
            &::before {
                position: absolute;
                z-index: 99;
                content: "";
                background: var(--epic-border-color);
            }
            &::after {
                top: 0;
                left: 4px;
                width: 1px;
                height: 100%;
            }
            &::before {
                top: 13px;
                left: 4px;
                width: 8px;
                height: 1px;
            }
            &.expanded::before {
                display: none;
            }
            &:last-child {
                &::after {
                    height: 13px;
                }
            }
        }
    }
}
