@import '~styles/settings';

.contextMenu {
    z-index: 1000;
    position: fixed;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 16px;
    color: #373a3c;
    text-align: left;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    outline: none;
    transition: opacity 250ms ease !important;
}

.contextMenu-item {
    padding: 3px 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #373a3c;
    white-space: nowrap;
    border: 0;
    cursor: pointer;

    &:hover {
        color: #fff;
        background-color: #20a0ff;
        border-color: #20a0ff;
        text-decoration: none;
    }
}

.explore-graph {
    width: 100%;
    height: 100%;
    position: absolute;
    // top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;

    .hierarchy-link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
        stroke-opacity: 0.5;
    }

    .node {
        cursor: pointer;

        circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 3px;

            &:hover {
                opacity: .5;
            }
        }

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

            dominant-baseline: central;
            font-weight: bold;
        }
    }

    .nodeActive {
        circle {
            stroke: $accent-color;
        }

        .nodeFocus {
            visibility: hidden;
        }
    }

    .link {
        fill: none;
        stroke: $accent-color;
        stroke-width: 1.5px;
    }
}

