/*

Vertex markers are `<circle>` elements that appear at connection vertex positions.

*/

.joint-link .connection-wrap,
.joint-link .connection {
   fill: none;
}

/* <g> element wrapping .marker-vertex-group. */
.marker-vertices {
   opacity: 0;
   cursor: move;
}
.marker-arrowheads {
   opacity: 0;
   cursor: move;
   cursor: -webkit-grab;
   cursor: -moz-grab;
/*   display: none;   */   /* setting `display: none` on .marker-arrowheads effectively switches of links reconnecting */
}
.link-tools {
   opacity: 0;
   cursor: pointer;
}
.link-tools .tool-options {
   display: none;       /* by default, we don't display link options tool */
}
.joint-link:hover .marker-vertices,
.joint-link:hover .marker-arrowheads,
.joint-link:hover .link-tools {
   opacity: 1;
}

/* <circle> element used to remove a vertex */
.marker-vertex-remove {
   cursor: pointer;
   opacity: .1;
}

.marker-vertex-group:hover .marker-vertex-remove {
   opacity: 1;
}

.marker-vertex-remove-area {
   opacity: .1;
   cursor: pointer;
}
.marker-vertex-group:hover .marker-vertex-remove-area {
   opacity: 1;
}

/*
Example of custom changes (in pure CSS only!):

Do not show marker vertices at all:  .marker-vertices { display: none; }
Do not allow adding new vertices: .connection-wrap { pointer-events: none; }
*/

/* THEMES */

/* Default theme */

.joint-link.joint-theme-default .connection-wrap {
   stroke: #000000;
   stroke-width: 9;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
   cursor: move;
}
.joint-link.joint-theme-default .connection-wrap:hover {
   opacity: .4;
   stroke-opacity: .4;
}
.joint-link.joint-theme-default .connection {
   stroke-linejoin: round;
}
.joint-link.joint-theme-default .link-tools .tool-remove circle {
   fill: #FF0000;
}
.joint-link.joint-theme-default .link-tools .tool-remove path {
   fill: #FFFFFF;
}
.joint-link.joint-theme-default .marker-vertex {
   fill: #1ABC9C;
}
.joint-link.joint-theme-default .marker-vertex:hover {
   fill: #34495E;
   stroke: none;
}

.joint-link.joint-theme-default .marker-arrowhead {
   fill: #1ABC9C;
}
.joint-link.joint-theme-default .marker-arrowhead:hover {
   fill: #F39C12;
   stroke: none;
}
.joint-link.joint-theme-default .marker-vertex-remove {
   fill: #FFFFFF;
}

/* Dark theme */

.joint-link.joint-theme-dark .connection-wrap {
   stroke: #8F8FF3;
   stroke-width: 9;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
   cursor: move;
}
.joint-link.joint-theme-dark .connection-wrap:hover {
   opacity: .4;
   stroke-opacity: .4;
}
.joint-link.joint-theme-dark .connection {
   stroke-linejoin: round;
}
.joint-link.joint-theme-dark .link-tools .tool-remove circle {
   fill: #F33636;
}
.joint-link.joint-theme-dark .link-tools .tool-remove path {
   fill: white;
}
.joint-link.joint-theme-dark .link-tools [event="link:options"] circle {
   fill: green;
}
.joint-link.joint-theme-dark .marker-vertex {
   fill: #5652DB;
}
.joint-link.joint-theme-dark .marker-vertex:hover {
   fill: #8E8CE1;
   stroke: none;
}
.joint-link.joint-theme-dark .marker-arrowhead {
   fill: #5652DB;
}
.joint-link.joint-theme-dark .marker-arrowhead:hover {
   fill: #8E8CE1;
   stroke: none;
}
.joint-link.joint-theme-dark .marker-vertex-remove-area {
   fill: green;
   stroke: darkgreen;
}
.joint-link.joint-theme-dark .marker-vertex-remove {
   fill: white;
   stroke: white;
}

/* Modern theme */

.joint-link.joint-theme-modern .connection-wrap {
   stroke: #000000;
   stroke-width: 15;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
   cursor: move;
}
.joint-link.joint-theme-modern .connection-wrap:hover {
   opacity: .4;
   stroke-opacity: .4;
}
.joint-link.joint-theme-modern .connection {
   stroke-linejoin: round;
}
.joint-link.joint-theme-modern .link-tools .tool-remove circle {
   fill: #FF0000;
}
.joint-link.joint-theme-modern .link-tools .tool-remove path {
   fill: #FFFFFF;
}
.joint-link.joint-theme-modern .marker-vertex {
   fill: #1ABC9C;
}
.joint-link.joint-theme-modern .marker-vertex:hover {
   fill: #34495E;
   stroke: none;
}
.joint-link.joint-theme-modern .marker-arrowhead {
   fill: #1ABC9C;
}
.joint-link.joint-theme-modern .marker-arrowhead:hover {
   fill: #F39C12;
   stroke: none;
}
.joint-link.joint-theme-modern .marker-vertex-remove {
   fill: white;
}

/* Material theme */

.joint-link.joint-theme-material .connection-wrap {
   stroke: #000000;
   stroke-width: 15;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
   cursor: move;
}
.joint-link.joint-theme-material .connection-wrap:hover {
   opacity: .4;
   stroke-opacity: .4;
}
.joint-link.joint-theme-material .connection {
   stroke-linejoin: round;
}
.joint-link.joint-theme-material .link-tools .tool-remove circle {
   fill: #C64242;
}
.joint-link.joint-theme-material .link-tools .tool-remove path {
   fill: #FFFFFF;
}
.joint-link.joint-theme-material .marker-vertex {
   fill: #d0d8e8;
}
.joint-link.joint-theme-material .marker-vertex:hover {
   fill: #5fa9ee;
   stroke: none;
}
.joint-link.joint-theme-material .marker-arrowhead {
   fill: #d0d8e8;
}
.joint-link.joint-theme-material .marker-arrowhead:hover {
   fill: #5fa9ee;
   stroke: none;
}
.joint-link.joint-theme-material .marker-vertex-remove-area {
   fill: #5fa9ee;
}
.joint-link.joint-theme-material .marker-vertex-remove {
   fill: white;
}