
$primary-blue: #304CB2;

.react-dependency-node {
    display: block;
    height: 36px;

    &_tall {
        height: 54px;
    }

    &--node {
        border-radius: 5px;
        box-shadow: inset 0 0 0 1px $primary-blue;
        display: inline-block;
        height: 36px;
        overflow: hidden;
        vertical-align: top;
        width: 130px;

        &_highlight {
            box-shadow: inset 0 0 0 2px $primary-blue;
        }

        &_tall {
            height: 54px;
        }

        &_wide {
            width: 210px;
        }
    }

    &--node-padding {
        display: inline-block;
        margin-left: 5px;
        overflow: hidden;
        width: 130px;

        &_wide {
            width: 200px;
        }
    }

    &--content {
        box-shadow: none;
        display: table-cell;
        font: 13px Arial;
        height: 36px;
        //text-align: center;
        //padding-left: 2px;
        vertical-align: middle;
        width: 125px;

        &_main {
            font-weight: bold;
        }

        &_tall {
            height: 54px;
        }

        &_wide {
            width: 200px;
        }
    }

    &--graphic {
        display: inline-block;
        width: 20px;
    }

    &--graphic_front-top {
        display: block;
        height: 20px;
    }

    &--graphic_front-bottom,
    &--graphic_back-top,
    &--graphic_back-bottom {
        display: block;
        height: 16px;
    }

    &--graphic_has-parent,
    &--graphic_has-child {
        border-bottom: 1px solid $primary-blue;
        vertical-align: top;
    }

    &--graphic_sybling-above,
    &--graphic_sybling-below,
    &--graphic_pass-thru {
        border-left: 1px solid $primary-blue;
        vertical-align: top;
    }

    &_tall {
        .react-dependency-node--graphic_front-top {
            height: 28px;
        }

        .react-dependency-node--graphic_front-bottom,
        .react-dependency-node--graphic_back-top,
        .react-dependency-node--graphic_back-bottom {
            height: 26px;
        }
    }
}
