src/components/AnnotationNoteConnectorLine/AnnotationNoteConnectorLine.scss
@import '../../constants/modal';
@import '../../constants/popup';

@media print {
  // do not allow line connector to show up on printed ping
  #line-connector-root {
    opacity: 0;
  }
}

#line-connector-root {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: min($modal-z-index, $popup-z-index) - 1;
}

.horizontalLine {
  background-color: rgba(30, 120, 235, 0.5);
  position: fixed;
  height: 2px;
  display: flex;
}

.verticalLine {
  background-color: rgba(30, 120, 235, 0.5);
  position: fixed;
  width: 2px;
}

.arrowHead {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-inline-end: 7px solid rgba(30, 120, 235);
  transform: translateX(-6px) translateY(-50%);

  &.arrow-right {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-inline-end: 0;
    border-inline-start: 7px solid rgba(30, 120, 235);
    transform: translateX(6px) translateY(-50%);
  }
}
