.react-shape-ports {
  position: relative;

  .in-ports,
  .out-ports {
    position: absolute;
    left: 0;
    right: 0;

    > span {
      position: absolute;
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid #ccc;
      border-radius: 6px;
      margin-left: -6px;
      top: -6px;
      cursor: pointer;
      background-color: #e9e9e9;

      &:nth-child(1) {
        left: 33.33%;
      }

      &:nth-child(2) {
        left: 66.67%;
      }
    }
  }

  .in-ports {
    top: 0;
  }

  .out-ports {
    bottom: 0;
  }
}
