//.tree-node-name-wrapper {
//    padding: .3rem .6rem;
//}

$size: 1.8rem;

.cd-node {
    &:before {
        width: $size;
        height: $size;
        display: inline-flex;
        border-radius: 50%;
        vertical-align: middle;
        margin: -2px 7px 0 0;
        align-items: center;
        justify-content: center;
        font-style: normal;
        font-size: .6 * $size;
        font-weight: 400 !important;
        color: #000 !important;
        text-transform: uppercase;
    }

    &_group:before {
        content: '';
        background-color: #DDD;
    }

    &_component:before {
        content: 'c';
        background-color: #F8CF8B;
    }

    &_service:before {
        content: 's';
        background-color: #D0BEF6;
    }

    &_directive:before {
        content: 'd';
        background-color: #FBB9C5;
    }

    &_pipe:before {
        content: 'p';
        background-color: #8CD3EC;
    }
}
