// (C) Copyright 2011-2014 Hewlett-Packard Development Company, L.P.

.hp-logical-switch {
  z-index: 1;
  position: relative;
  padding: 10px 40px;
  @include box-sizing(border-box);
  
  form.hp-show-form {
    fieldset {
      padding: 0px;
      min-width: auto;
    }
    li.hp-form-item {
      margin-bottom: 0px;
      
      > label {
        &:first-child {
          color: $secondary-color;
          padding-right: 10px;
          width: 33%;
          text-align: left;
          margin-right: 5px;
          margin-top: 0px;
          min-width: auto;
        }
      }
    }
  }
  
  .hp-switch.hp-device { 
    padding: 5px 10px 30px 15px;
    margin: 50px 20px 0px 0px;
    background-color: transparent;
    display: inline-block;
    @include transition(opacity, $appearance-duration);

    .hp-usage {
      display: none;
    }
    > .hp-up-ports, > .hp-backplane-ports {
      margin: 1px -7px;
      display: inline-block;
      .hp-up-port {
         
        .hp-status {
          left: 6px;
          padding: 0px 3px;
        }
        .hp-full {
          .hp-form-contents {
            margin-left: 0px;
            margin-right: 20px;
          }
        }
      }
    }
    
    &.hp-initialize {
      
      > .hp-up-ports {
        display: none;
      }
    }
    
    > .hp-backplane-ports {
      margin: 0px;
      top: -5px;
    }
    
  }
  
  > canvas {
    position: absolute;
    margin: -10px -40px;
    pointer-events: none;
  }
  
  &.hp-small {
    padding: 10px;
    > canvas {
      margin: -10px;
    }
    .hp-physical-switch-row {
      &:last-child {
        padding-bottom: 10px;
      }
      .hp-switch {
        margin-top: 10px;
        margin-right: 10px;
        h3.hp-name, .hp-contents {
          display: none;
        }
      }
    }
    .hp-logical-uplinks .hp-logical-uplink {
      margin-bottom: 10px;
    }
  }
  
  .hp-controls {
    position: absolute;
    right: 0px;
    top: 5px;
  }
  
  .hp-edit-contents, .hp-close, .hp-uplink-controls {
    display: none;
  }
  
  &.hp-alter {
    .hp-logical-uplinks {
      .hp-logical-uplink {
        .hp-controls {
          margin-top: 5px;
          margin-right: 2px;
        }
        &.hp-initialize {
          .hp-name {
            cursor: pointer;
          }
        }
        h3.hp-name {
          margin: 5px 0px;
        }
      }
    }
    .hp-contents {
      display: none;
    }
    .hp-switch {
      .hp-close {
        display:inline-block;
      }
      .hp-secondary {
        margin-top: 10px;
      }
      
      .hp-full {
        .hp-secondary {
          margin-top: 0px;
        }
      }
      .hp-contents {
        .hp-secondary {
          display: none;
        }
      }
      .hp-edit-contents {
        display: inline;
        fieldset {
          padding-left: 0px;
          left: -3px;
          margin-top: 15px;
          margin-bottom: 0px;
          min-width: 0px;
        }
      }
      .hp-condensed {
        input {
          display: none;
        }
      }
      .hp-backplane-ports {
        display: none;
      }
      
      &.hp-initialize {
        min-width: 190px;
        background-color: $secondary-background;
        
        .hp-contents {
          display: none;
        }
        
        .hp-add-contents {
          display: block;
          margin-top: 3px;
        }
        &:hover {
          border-color: $highlight-border;
        }
      }
    }
    
    .hp-logical-uplinks .hp-logical-uplink {
      margin-bottom: 30px;
      .hp-controls {
        .hp-close {
          display: inline-block;
        }
      }
    }
    &.hp-edit-uplink {
      canvas {
        z-index: -1;
      }
      .hp-controls {
        .hp-close {
          display: none;
        }
      }
      
      .hp-network-controls {
        display: inline-block;
        vertical-align: baseline;
        margin: 10px 20px 10px 0px;
        
        .hp-network-add {
          border-right: 1px solid $graphics-border;
          padding-right: 5px;
        }
        
        .hp-network-remove {
          padding-left: 5px;
        }
      }
      .hp-uplink-controls {
        display: inline-block;
        margin-bottom: 10px;
        
        a:hover {
          text-decoration: none;
        }
        
        .hp-previous {
          border-right: 1px solid $graphics-border;
          padding: 0px 5px 0px 0px;
          
          &:before {
            content: "< ";
          }
        }
        .hp-next {
          border-left: 1px solid $graphics-border;
          padding: 0px 5px;
          
          &:after {
            content: " >";
          }
        }
      }
      .hp-logical-uplink {
        h3.hp-name {
          font-size: 18px;
          margin-top: 5px;
          font-family: 'HPLight', Arial, Helvetica, sans-serif;
        }
        .hp-controls {
          .hp-edit, .hp-close {
            display: none;
          }
        }
        .hp-edit-contents {
          display: inline-block;
        }
      }
    
      .hp-switch {
        &.hp-initialize {
          display: none;
        }
        .hp-edit-contents {
          display: none;
        }
        .hp-contents {
          .hp-secondary {
            display: none;
          }
        }
      } 
    }
  }
  
  .hp-logical-uplinks {
    position: relative;
    margin-bottom: 0px;

    .hp-logical-uplink {
      position: relative;
      display: inline-block;
      margin: 0px 10px 35px 0px;
      background-color: $primary-background;
      @include box-sizing(border-box);
      @include transition(opacity, $appearance-duration);
      cursor: pointer;
      
      &.hp-highlight {
        border-color: $highlight-border;
      }
      
      &:hover {
          z-index: 10;
      }
      
      &.hp-selected {
        border-color: #7fbfda;
      }

      &.hp-hidden {
        display: none;
      }
      
      > h3.hp-name, > label {
        display: block;
        margin: 0px 0px 10px 0px;
        padding-right: 30px;
        font-size: inherit;
        white-space: nowrap;
      }
      
      div {
        color: $secondary-color;
      }

      .hp-controls {
        top: 5px;
        right: 3px;
        > * {
          display: inline-block;
          cursor: pointer;
        }
        .hp-close {
          display: none;
          position: relative;
          top: 2px;
        }
        .hp-link-button {
          padding-right: 5px;
          display: none;
        }
      }

      &.hp-initialize {
        background-color: $secondary-background;
        
        .hp-edit-contents, .hp-controls {
          display: none;
        }
      }  
    }
  }
  
  .hp-physical-switch-rows {
    margin-bottom: 0px;
  }
  
  .hp-physical-switch-row {
    display: block;
    //white-space: nowrap;
    
    &:last-child {
      padding-bottom: 50px; // for lower port connections below
    }
  }

  .hp-switch {
    
    &.hp-highlight {
      border-color: $highlight-border;
    }
    
    &.hp-device > .hp-name, .hp-device > label {
      position: relative;
    }
    
    .hp-close, .hp-add-contents {
      display: none;
    }
    
    .hp-summary {
      > * {
        display: inline-block;
      }
    }
    
    &.hp-alter {
      .hp-controls {
        display: inline-block;
      }
    }
    > .hp-up-ports {
      .hp-condensed {
        input {
          display: none;
        }
      }
    }

    &.hp-initialize {
      
      .hp-add-contents {
        .hp-add {
          cursor: pointer;
        }
      
        .hp-secondary {
          display: block;
          padding-left: 0px;
        }
      }
      
      .hp-edit-contents, .hp-controls, .hp-select, .hp-status {
        display: none;
      }
      
    }
    
    &.hp-device {
      
      &.hp-placeholder {
        @include box-sizing(border-box);
        padding: 20px;
        min-width: 278px;
        text-align: center;
      }
      
      > button, > input {
        display: inline-block;
      }
      
      > h3.hp-name, > label, > header {
        display: block;
        position: absolute;
        margin: 0px;
        font-size: inherit;
        left: 15px;
        bottom: 8px;
        
        > input, > .hp-search-combo, > .selectBox-dropdown {
          display: block !important;
          margin: 5px 0px;
          > input {
            width: 100%;
          }
        }
      }

      > .hp-up-ports, > .hp-backplane-ports {
        
        &:first-child {
          //top: -7px;
        }
        
        .hp-up-port {
          @include transition(opacity, $appearance-duration);
          padding: 3px 5px;
          height: 26px;
        }
      }
      
      .hp-backplane-ports {
        
      }
    }
    
    &.hp-alter {
      .hp-edit-contents {
        width: 300px;
      }
      
      .hp-alter {
        display: inline-block;
      }

      > .hp-up-ports {
        > input {
          display: none;
        }
      }
      
      .hp-status {
        display: none;
      }
      
      .hp-controls {
        position: absolute;
        top: 6px;
        right: 3px;
        
        > * {
          display: inline-block;
          vertical-align: top;
          cursor: pointer;
        }
        
        .hp-close {
          position: relative;
          top: 2px;
        }        
      }
    }

    &.hp-alter {
      
      .hp-up-port {
        > input[type="checkbox"] {
          display: block;
        }
      }
      
      .hp-select {
        display: none;
      }
    }
  }
  
  &.hp-has-highlight {
    
    .hp-up-port, .hp-logical-uplink, .hp-device {
      opacity: 0.4;
      
      &.hp-highlight {
        opacity: 1.0;
        color: #000;
      }
    }
    
    .hp-device  {
      &.hp-initialize {
        opacity: 1;
      }
    }
  }
  
  &.hp-initialize-deprecated {
    .hp-logical-uplinks .hp-logical-uplink {
      .hp-controls {
        .hp-close {
          display: inline-block;
        }
      }
    }
  }
  
  &.hp-logical-switch-deprecated {
    .hp-switch.hp-device {
      &.hp-small {
        padding-bottom: 18px;
      }
      .hp-up-ports {
        top: -13px;
        &.hp-ports-deprecated {
          top: 0px;
        }
      }
      header, label {
        position: relative;
        left: 0px;
        top: 50px;
      }
      header.hp-switch-type {
        bottom: 0px;
        top: 5px;
        
        label {
          top: 0px;
        } 
      }
    }
  }
}