wanderer/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss

@import "@/hooks/Mapper/components/map/styles/neon-variables";

.react-flow__edge.selected {
  .EdgePathBack {
    stroke: $pastel-yellow;
  }
}

.EdgePathFront {
  fill: none;

  stroke: #2c3844;
  stroke-width: 2px;

  &.MassVerge:not(&.Frigate) {
    stroke: #af2900;
  }

  &.MassHalf:not(&.Frigate) {
    stroke: #a85f00;
  }

  &.Frigate {
    stroke: #d4f0ff;
  }

  &.Gate {
    stroke: #1c1e15;
  }

  &.Hovered {
    stroke: #4e5d6c;
    stroke-width: 2px;

    &.MassVerge:not(&.Frigate) {
      stroke: #9d4c34;
    }

    &.MassHalf:not(&.Frigate) {
      stroke: #ec992c;
    }

    &.Frigate {
      stroke: #d4f0ff;
    }
  }

  &.Tick {
    stroke-width: 3px;

    &.Hovered {
      stroke-width: 3px;
    }
  }
}

.EdgePathBack {
  fill: none;

  stroke: #80a5c5;
  stroke-width: 3px;

  &.TimeCrit {
    stroke: #f11ab2;
    stroke-width: 4px;
  }

  &.Hovered {
    stroke: #b5c8d9;

    &.TimeCrit {
      stroke: #ef7dce;
    }
  }

  &.Tick {
    stroke-width: 5px;

    &.TimeCrit {
      stroke-width: 6px;
    }
  }

  &.Gate {
    stroke: #9aff40;
  }

}

.ClickPath {
  fill: none;
  stroke: none;
  stroke-width: 8px;
}

.LinkLabel{
  font-size: 9px;
  line-height: 10px;
  padding: 2px 4px;
  opacity: 1;

  & > span {
    font-weight: bold;
  }
}

.icon {
  width: 8px;
  height: 8px;
  font-size: 8px;
}

.Handle {
  min-width: initial;
  min-height: initial;
  border: 1px solid #5a7d9a;
  width: 5px;
  height: 5px;
  z-index: 1001;

  &.Tick {
    width: 7px;
    height: 7px;

    &.Right {
      margin-left: 0px;
    }
  }
}