.base-node {
    border-radius: 4px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background: #0e2f4a;
    box-shadow: 3px 3px 3px #000000;
    color: #fff;

    svg {
        padding: 10px;

        &:not(.node-icon):not(.running):hover {
            cursor: pointer;
            color: #E91E63;
            scale: 1.3;
        }
    }

    .highlight {
        color: #E91E63;
    }

    .node-icon-wrapper {
        position: relative;
        display: flex;

        .node-icon {
            border-radius: 3px 0 0 3px;
            background: #E91E63;
            width: 20px;
            height: 20px;
        }

        $node-icon-tooltip-background: rgba(0, 0, 0, 0.5);

        .node-title-label {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: $node-icon-tooltip-background;
            color: white;
            padding: 2px 4px;
            border-radius: 4px;
            font-size: 6px;
            white-space: nowrap;
            z-index: 10;
            pointer-events: none;

            &::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid $node-icon-tooltip-background;
            }
        }
    }
}