@import "variables";

#popup-connection {
  height: 100%;
  position: relative;

  img {
    vertical-align: middle;
  }

  td {
    vertical-align: top;
  }

  .popup-content {
    position: absolute !important;
    top: 41px;
    bottom: 0;
  }
}

#C__CONNECTION_POPUP__LOCAL_SWITCHER,
#C__CONNECTION_POPUP__DESTINATION_SWITCHER {
  display: flex;
  align-items: center;
}

#C__CONNECTION_POPUP__CONNECTION {
  width: 130px;

  button {
    position: absolute;
    top: 5px;
    left: auto;
    margin: 0 50px;
  }

  path {
    stroke: $neutral-200;
    fill: transparent;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;

    &.highlight {
      stroke: $input-focus-color;
    }
  }
}

#C__CONNECTION_POPUP__LOCAL_OBJECT_CONNECTORS,
#C__CONNECTION_POPUP__DESTINATION_OBJECT_CONNECTORS {
  -webkit-perspective: 1000px;
  perspective: 1000px;

  -webkit-perspective-origin: center 200px;
  perspective-origin: center 200px;

  .connector-cable-container {
    display: none;
    right: -50px;
    width: 50px;
    height: 20px;
    top: 6px;
    position: absolute;
  }

  .connector-cable {
    position: absolute;
    width: 40px;
    background: $input-focus-color;
    border-radius: 8px;
    text-align: center;
    padding: 0 5px;
    color: #fff;
    right: 0;
  }

  li {
    padding: 5px;
    background: #fff;
    height: 40px;
    line-height: 20px;
    position: relative;
    border: 2px solid transparent;

    &:nth-child(2n+1) {
      background: $neutral-200;
    }

    &:hover {
      background: rgba($input-focus-color, 50%);

      button {
        opacity: 1;

        &[disabled],
        &.disabled {
          opacity: 0.5;
        }
      }
    }

    input {
      margin: 3px 5px 0 0;
      float: right;
    }

    button {
      opacity: 0;
      position: absolute;
      left: 50%;
      margin-left: -14px;
      top: 5px;

      &.btn-green,
      &.hopper {
        opacity: 1;
      }
    }
  }

  &.connect-to li button.connection {
    opacity: 1;
  }

  .connector-name,
  .connector-sibling-name {
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
  }
}

#C__CONNECTION_POPUP__LOCAL_OBJECT_CONNECTORS {
  .connector-sibling-name {
    float: left;
    margin-left: 5px;
  }

  .connector-name {
    float: right;
    margin-right: 5px;
    max-width: 43%;
  }

  li {
    &.directly-connected {
      border-right: 2px solid $neutral-200 !important;

      &:hover,
      &.hover {
        border-right: 2px solid $input-focus-color !important;
      }

      &:hover {
        background: rgba($input-focus-color, 50%);
      }

      &.clicked {
        border: 2px solid $input-focus-color !important;
      }
    }

    button {
      &.connection {
        margin-left: 14px;
      }

      &.detach {
        margin-left: 42px;
      }
    }
  }
}

#C__CONNECTION_POPUP__DESTINATION_OBJECT_CONNECTORS {
  .connector-cable-container {
    left: -50px;
    right: auto;
  }

  .connector-cable {
    left: 0;
    right: auto;
  }

  .connector-name {
    float: left;
    max-width: 45%;
  }

  .connector-sibling-name {
    float: right;
    margin-right: 5px;
    max-width: 47%;
  }

  li {
    &.directly-connected {
      border-left: 2px solid $neutral-200 !important;

      &:hover,
      &.hover {
        border-left: 2px solid $input-focus-color !important;
      }

      &:hover {
        background: rgba($input-focus-color, 50%);
      }

      &.clicked {
        border: 2px solid $input-focus-color !important;
      }
    }

    input {
      float: left;
    }

    button {
      &.connection {
        margin-left: -42px;
      }

      &.detach {
        margin-left: -70px;
      }
    }
  }
}

#C__CONNECTION_POPUP__LOCAL_OBJECT_CONNECTORS li.directly-connected:hover .connector-cable-container,
#C__CONNECTION_POPUP__DESTINATION_OBJECT_CONNECTORS li.directly-connected:hover .connector-cable-container {
  display: block;
}


#C__CONNECTION_POPUP__LOCAL_SELECT_ALL {
  margin: 2px 8px 0 5px;
  float: right;
}

#C__CONNECTION_POPUP__DESTINATION_SELECT_ALL {
  margin: 2px 5px 0 3px;
  float: left;
}

#C__CONNECTION_POPUP__MODAL {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &.light {
    background-color: rgba($white, 30%);
  }

  &.dark {
    background-color: rgba($black, 30%);
  }
}

#C__CONNECTION_POPUP__LOADING {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 30px;
  margin-left: -125px;
  margin-top: -15px;
  line-height: 30px;
  text-align: center;
}

#C__CONNECTION_POPUP__CABLE_BROWSER {
  position: absolute;
  top: 50%;
  left: 50%;
}
