:global {
  .my-port {
    width: 100%;
    height: 100%;
    border: 1px solid #808080;
    border-radius: 100%;
    background: #eee;

    &.connected {
      width: 0;
      height: 0;
      margin-top: 5px;
      margin-left: 1px;
      border-width: 5px 4px 0;
      border-style: solid;
      border-color: #808080 transparent transparent;
      border-radius: 0;
      background-color: transparent;
    }
  }

  .x6-node.available {
  }

  .x6-port-body.available {
    overflow: visible;

    body {
      overflow: visible;
    }

    body > div::before {
      content: ' ';
      float: left;
      width: 20px;
      height: 20px;
      margin-top: -5px;
      margin-left: -5px;
      border-radius: 50%;
      background-color: rgba(57, 202, 116, 0.6);
      box-sizing: border-box;
    }

    body > div::after {
      content: ' ';
      float: left;
      clear: both;
      width: 10px;
      height: 10px;
      margin-top: -15px;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid #39ca74;
      position: relative;
      z-index: 10;
      box-sizing: border-box;
    }
  }

  .x6-port-body.adsorbed {
    overflow: visible;

    body {
      overflow: visible;
    }

    body > div::before {
      content: ' ';
      float: left;
      width: 28px;
      height: 28px;
      margin-top: -9px;
      margin-left: -9px;
      border-radius: 50%;
      background-color: rgba(57, 202, 116, 0.6);
      box-sizing: border-box;
    }

    body > div::after {
      content: ' ';
      float: left;
      clear: both;
      width: 10px;
      height: 10px;
      margin-top: -19px;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid #39ca74;
      position: relative;
      z-index: 10;
      box-sizing: border-box;
    }
  }
}
