@import '~styles/settings';

.svg-content {
    width: 100%;
    height: 100%;
    position: absolute;
    // top: 0;
    bottom: $bottombar-height;
    left: 0;
    right: 0;
    cursor: auto;
}

// .svg-content.editMode {
//     &:hover {
//         cursor: cell;
//     }
// }

.abstract-graph g {
    .node {
        cursor: pointer;

        .outerCircle {
            cursor: crosshair;
        }

        .innerCircle {
            cursor: pointer;
        }

        circle {
            transition: opacity 0.5s ease;
        }

        circle:hover {
            opacity: .5;
        }
    }

    .node-hovered {
        circle {
            fill: #000000 !important;
        }
    }

    .nodeActive {
        circle {
            fill: $accent-color !important;
        }
    }

    .node text {
        fill: #0F073B;
        stroke: none;
        font-size: 1.2em;
        z-index: 100;

        text-anchor: middle;
        dominant-baseline: central;
        font-weight: bold;
    }

    .link {
        fill: transparent;
    }

    .node-link {
        stroke: $accent-color;
        stroke-width: 3px;
        // stroke-opacity: .4;

        /* shaft-width: 1px; */
        /* stroke-width:1.5px */
        /* font-size: 8px; */
        /* padding: 3px; */
        /* text-color-external: #000000; */
        /* text-color-internal: #FFFFFF; */
    }

    .node-link-transparent {
        stroke: transparent;
        stroke-width: 10px;
        fill: transparent;

        &:hover {
            cursor: pointer;
        }
    }


    .node-arrow {
        fill: $light-accent-color;
    }

    .node-link.hidden {
        visibility: hidden;
    }
}

