.link {
    stroke: #ccc;
    stroke-width: 1.5px;
}

svg > g {
    transition: all 0.3s;
}

.node {

    /**
     * Node colors
     */
    @each $type in $components {
        $i: index($components, $type);
        &.#{$type} {
            & > circle {
                fill: nth($components-colors, $i);
            }
            &.fixed > circle {
                fill: lighten(nth($components-colors, $i), 20%);
            }
        }
    }

    /**
     * Circle in node
     */
    circle {
        stroke: $white;
        stroke-width: 1px;
        r: 8;
        transition: all 0.3s;
    }

    &.fixed circle {
        r: 11;
        // stroke: #ccc;
    }
    
    &:hover circle {
        r: 10;
    }

    &.selected circle {
        r: 12;
        stroke-width: 2px;
        stroke: $white;
    }

    &.selected.module circle {
        r: 12;
        stroke-width: 2px;
        fill: lighten($color-module, 20%);
    }

}


text {
    cursor: pointer;
    font: 12px sans-serif;
    pointer-events: none;

    paint-order: stroke;
    stroke: #000000;
    stroke-width: 4px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    font-weight: 800;

}


.filters__component-type {
  label {
    user-select: none;
  }
}