@import "client/common.scss";
@charset "UTF-8";

.dialog.gear-wizard, #configure-tracks-dialog {

  .icon-instrument-select {
    padding: 3px 0; // to combine 24 of .current-instrument + 3x on either side
    margin: 0 0 15px 25px; // 15 margin-bottom to match tracks on the left
    width: 30px;
  }

  .unassigned-output-channels {
    min-height: 90px;
    overflow-y: auto;
    max-height: 90px;
    //padding-right:18px; // to keep draggables off of scrollbar. maybe necessary

    &.drag-in-progress {
    }

    &.possible-target {
      border: solid 1px white;

      &.drag-hovering {
        border: solid 1px #ED3618;
      }
    }
  }

  .channels-holder {
    .ftue-input {
      background-position:4px 6px;
      padding-left:14px;
    }
  }
  .unassigned-input-channels {
    min-height: 240px;
    overflow-y: auto;
    max-height:93%;

    //padding-right:18px; // to keep draggables off of scrollbar. maybe necessary

    &.compensate {
      .ftue-input:not(.hovering) {
      }
    }
    .ftue-input {

    }

    &.drag-in-progress {
    }

    &.possible-target {
      border: solid 1px white;

      &.drag-hovering {
        border: solid 1px #ED3618;
      }
    }
  }

  .num {
    position: absolute;
    height: 29px;
    line-height: 29px;
  }
  .track, .output {
    margin-bottom: 15px;
    .track-target, .output-target {
      &.possible-target {
        border-color: white;
      }
      &.drag-hovering {
        border-color: #ED3618;
      }
    }
  }

  // do not show tracks with 2 channels as a possible target
  .track .track-target.possible-target[track-count="2"] {
    border-color:#999;
  }

  // do now show output slots with 1 channel as a possible target
  .output .output-target.possible-target[output-count="1"] {
    border-color:#999;
  }

  .ftue-input {
    font-size: 12px;
    cursor: move;
    padding: 4px;
    padding-left:10px;
    border: solid 1px #999;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    line-height:20px;
    background-image:url('/assets/content/icon_drag_handle.png');
    background-position:0 3px;
    background-repeat:no-repeat;
    //direction: rtl;
    &.ui-draggable-dragging {
      margin-bottom: 0;
      z-index:10000;
      background-color:#333;
    }

    /**
    &:hover {
     color:white;
     overflow:visible;
      background-color:#333;
      width: auto !important;
      direction:ltr;
      position:absolute;
      line-height:19.5px;
    }*/
  }

  .track-target, .output-target {

    position:relative;
    cursor: move;
    padding: 4px;
    border: solid 1px #999;
    margin-left: 15px;
    height: 20px;
    overflow: hidden;

    &.drag-in-progress {
      overflow: visible;
    }

    .ftue-input {
      padding: 0;
      padding-left:10px;
      border: 0;
      margin-bottom: 0;
      &.ui-draggable-dragging {
        padding: 4px;
        padding-left:14px;
        background-position:4px 6px;
        border: solid 1px #999;
        overflow: visible;
      }
    }

    .placeholder {
      display: none;
      font-size: 12px;
    }

    &[track-count="0"], &[output-count="0"] {
      .placeholder {
        display: inline;
      }
    }

    &[track-count="2"] {
      .ftue-input {
        width: 49%;
        display: inline-block;
        @include border_box_sizing;


        &:nth-of-type(1) {
          float: left;
          padding-right:2px;
          /**&:after {
            float:right;
            content: ',';
            padding-right:3px;
          }*/
        }
        &:nth-of-type(2) {
          padding-left:10px;
          float: right;
        }
      }
    }
  }
}