.bowtie {
  &.rtl {
    transform: scale(-1, 1);
  }

  .line {
    fill: none;

    &.input {
      stroke: url(#input-gradient);
    }
    &.output {
      stroke: url(#output-gradient);
    }
    &.fee {
      stroke: url(#fee-gradient);
    }
    &.zerovalue {
      stroke: url(#gradient0);
      stroke-linecap: round;
    }

    &.highlight {
      z-index: 8;
      cursor: pointer;
      &.input {
        stroke: url(#input-highlight-gradient);
      }
      &.output {
        stroke: url(#output-highlight-gradient);
      }
      &.zerovalue {
        stroke: var(--info);
      }
    }
  }

  .line:hover, .marker-target:hover + .line {
    z-index: 10;
    cursor: pointer;
    &.input {
      stroke: url(#input-hover-gradient);
    }
    &.output {
      stroke: url(#output-hover-gradient);
    }
    &.fee {
      stroke: url(#fee-hover-gradient);
    }
    &.zerovalue {
      stroke: white;
    }
  }

  .connector {
    stroke: none;
    opacity: 0.75;
    cursor: pointer;
    &.input {
      fill: url(#input-connector-gradient);
    }
    &.output {
      fill: url(#output-connector-gradient);
    }
  }

  .connector:hover {
    &.input {
      fill: url(#input-hover-connector-gradient);
    }
    &.output {
      fill: url(#output-hover-connector-gradient);
    }
  }

  .marker-target {
    stroke: none;
    fill: transparent;
    cursor: pointer;
  }
}