.tree-page {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    &-head {
        z-index: 100;
    }
    &-main {
        display: flex;
        flex-direction: row;
        flex: 1 1;
    }
    &-tree {
        position: relative;
        flex: 1 1;
    }
}

.tree {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background-color: $ctrl-background-color;
    box-shadow: inset 0 0 8px 1px darken($color: $main-background-color, $amount: 5%);
    .tree-content {
        position: relative;
        transform-origin: 0 0;
        .node {
            background-color: $node-background-color;
            display: inline-block;
            max-width: 250px;
            min-width: 100px;
            position: absolute;
            cursor: pointer;
            /*default position necessary for correct width and height computation*/
            left: 0;
            top: 0;
            .item {
                position: relative;
                &:hover::after,
                &.selected::after {
                    position: absolute;
                    display: block;
                    content: '';
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    outline: solid 5px $node-selected-border-color;
                    z-index: 21;
                }
                .icon {
                    font-size: 1.5em;
                    color: $node-icon-color;
                    margin: 0;
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .content {
                    color: $node-color;
                    overflow: hidden;
                    border-left: 45px solid white;
                    word-wrap: break-word;
                    padding: 4px 8px 4px 4px;
                    min-height: 1.8em;
                    margin: 0;

                    .name {
                        font-weight: bold;
                    }
                    .name-sub{
                        display: block;
                        font-weight: normal;
                        opacity: 0.7;
                        font-size: 0.9em;                        
                    }
                    .comment-icon{
                        position: absolute;
                        right: 4px;
                        top: 4px;
                    }
                    .comment-content{
                        display: none;
                        position: absolute;
                        background: $node-background-color;
                        color: $node-comment-color;
                        z-index: 20;
                        width: 250px;
                        padding: 15px;
                        top: 50%;
                        left: 100%;
                        transform:translate(15px, -50%);
                        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.28);
                        &::after{
                            display: block;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform:translate(-90%, -50%);
                            content: '';
                            width: 0; 
                            height: 0; 
                            border-top: 10px solid transparent;
                            border-bottom: 10px solid transparent; 
                            border-right:10px solid $node-background-color; 
                        }
                    }
                }
                &:hover {
                    .comment-content{
                        display: block;
                    }
                }
                .content-with-comment{
                    padding-right: 20px;
                }
                &.decorator {
                    .content {
                        color: $node-decorator-color;
                        border-left-color: $node-decorator-background-color;
                    }
                }
                &.service {
                    .content {
                        color: $node-service-color;
                        border-left-color: $node-service-background-color;
                    }
                }
                &.decorator.invalid {
                    .content {
                        color: $node-color;
                        background: $invalid-node-item-background-color;
                    }
                }
                &.service.invalid {
                    .content {
                        color: $node-color;
                        background: $invalid-node-item-background-color;
                    }
                }
            }
            &.composite {
                .node-desc {
                    .content {
                        background: $composite-node-background-color;
                        border-left-color: $composite-node-background-color;
                    }
                }
            }
            &.action {
                .node-desc {
                    .content {
                        background: $action-node-background-color;
                        border-left-color: $action-node-background-color;
                    }
                }
            }
            .node-desc.invalid {
                .content {
                    background: $invalid-node-item-background-color;
                    border-left-color: $invalid-node-item-background-color;
                }
            }
            &.decorator.invalid {
                .content {
                    color: $node-decorator-color;
                    background: $invalid-node-item-background-color;
                }
            }
            &.service.invalid {
                .content {
                    color: $node-service-color;
                    background: $invalid-node-item-background-color;
                }
            }
        }
        .link,
        .link-start {
            stroke: $line-color;
            fill: none;
            stroke-width: 3px;
        }
    }
}