$app-id: leader-line;

.#{$app-id} {
  position: absolute;
  overflow: visible !important; // Commonly used style `svg:not(:root)` is high scored.
  pointer-events: none !important;
  font-size: 16px; // for label
}

##{$app-id}-defs {
  width: 0;
  height: 0;
  position: absolute;
  left: 0; // coordinates for avoiding making margin at the bottom of body in Trident.
  top: 0;
}

.#{$app-id}-line-path {
  fill: none;
}

.#{$app-id}-mask-bg-rect {
  fill: white;
}

.#{$app-id}-caps-mask-anchor,
.#{$app-id}-caps-mask-marker-shape {
  fill: black;
}

.#{$app-id}-caps-mask-anchor {
  // for attachment
  stroke: black;
}

.#{$app-id}-caps-mask-line,
.#{$app-id}-plugs-face {
  // Show only markers.
  stroke: rgba(0, 0, 0, 0); /* `transparent` might not be supported */
}

.#{$app-id}-line-mask-shape {
  stroke: white;
}

.#{$app-id}-line-outline-mask-shape {
  stroke: black;
}

.#{$app-id}-plug-mask-shape {
  fill: white;
  stroke: black;
}

.#{$app-id}-plug-outline-mask-shape {
  fill: black;
  stroke: white;
}

.#{$app-id}-areaAnchor {
  position: absolute;
  overflow: visible !important;
}