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

.hp-rack-context {
  white-space: nowrap;
  
  .hp-rack, .hp-rack-power {
    display: inline-block;
    margin-right: 30px;
    &:last-child {
      margin-right: 0px;
    }
  }
  
  > canvas {
    position: absolute;
    pointer-events: none;
  }
  
  &.hp-has-highlight {

     ol.hp-rack-devices > li, .hp-rack-power .hp-device {
       opacity: 0.4;
       background-color: #f8f8f8;

       &.hp-highlight {
         opacity: 1.0;
         color: #000;
         background-color: #fff;
       }
     }
  }
     
  ol.hp-rack-devices > li {
    border-width: 1px 0px;
    border-style: solid;
    border-color: transparent;
     
    &:hover, &.hp-active {
      position: relative;
      z-index: 100;
      overflow: visible;
      margin: 0px;

      &.hp-device {
        border-bottom-width: 1px;
      }

      div.hp-master-filter & {
        margin: 0px;
      }

      &.hp-device, > .hp-device {
        position: relative;
        left: 20px;
        min-height: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #fff;
        border: 1px solid $graphics-border;
        @include animation(0.3s, ease);
        @include animation-fill-mode(both);
        @include animation-name(fadeInLeft);

        div.hp-master-filter & {
          background-color: $primary-hover-background;
          border-color: transparent;
          border-width: 1px 2px 2px 2px;
          border-radius: 0px;
          margin: 0px;
        }

        .hp-device-name {
          white-space: normal;
        }
      }
    }

    &.hp-highlight {
      border-color: $highlight-border;

      &.hp-device, > .hp-device {
        min-height: 100%;
      }
    }
  }
  
  &.hp-small {
    ol.hp-rack-power {
      > li {
        .hp-device {
          max-width: 80px;
          word-break: break-all;
          .hp-device-name {
            max-width: 55px;
            width: 55px; // IE8
          }
        }
      }
    }
  }
}

.hp-rack {
  display: inline-block;
  @include box-sizing(border-box);
  @include device-border();
  min-width: 190px;
  
  &.hp-device {
    @include box-sizing(border-box);
    width: 200px;
    
    > header {
      padding: 0px;
    }
  }
  
  > label {
    display: block;
    padding: 5px 15px;
  }
  
  &:not(.hp-device) > header {
    padding: 10px 15px;
    
    .hp-status, .hp-device-name {
      display: inline-block;
      vertical-align: top;
      top: 3px;
    }
    
    .hp-status {
      top: 1px;
    }
  }
  
  &.hp-selected > header {
    background-color: $selected-background;
  }
  
  &.hp-collapsed {
    header {
      border-bottom: none;
    }
    > ol {
      display: none;
    }
  }
  
  ol.hp-rack-devices {
    margin-bottom: 0px;
    
    > li {
      position: relative;
      border-color: $graphics-border;
      overflow: hidden;
      width: 198px; // IE8
      
      &.hp-device {
        border-width: 1px;
      }
      
      .hp-device {
        border-color: transparent;
      }
      
      &.hp-device, > .hp-device {
        @include box-sizing(border-box);
        padding: 5px 15px;
        width: 200px;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        background-image: none;
        margin: 0px;
        overflow: hidden;
        white-space: nowrap;
        
        div.hp-master-filter & {
          width: 196px;
          padding-left: 13px;
          border-width: 1px 2px 2px 2px;
          border-radius: 0px;
          margin: 0px;
        }

        .hp-device-name {
          display: inline-block;
          @include text-overflow(ellipsis);
          max-width: 135px;
          overflow: hidden;
        }

        .hp-device-model {
          white-space: normal;
        }

        .hp-filter-pane & {
          width: 160px;
        }
      }
      
      &.hp-rack-2u {
        &.hp-device, > .hp-device {
          padding: 5px 15px;
          .hp-device-model {
            display: none;
          }
        }
        &:hover {
          &.hp-device, > .hp-device {
            .hp-device-model {
              display: block;
            }
          }
        }
      }

      &.hp-rack-1u {
        &.hp-device, > .hp-device {
          padding: 0px 15px;
          .hp-device-model {
            display: none;
          }
        }
        .hp-rack-empty {
          padding: 0px 15px 0px 32px;
        }
        &:hover {
          &.hp-device, > .hp-device {
            padding-top: 5px;
            padding-bottom: 5px;
            .hp-device-model {
              display: block;
            }
          }
        }
      }
      
    }
  }
  
  &.hp-rack-slots {
    ol.hp-rack-devices > li {
      
      .hp-rack-uslot-top, .hp-rack-uslot-bottom {
        @include box-sizing(border-box);
        border: none;
        display: block;
        position: absolute;
        right: 0px;
        line-height: 14px;
        text-align: right;
        color: $secondary-color;
        background-color: $secondary-background;
        padding: 0px 5px 0px 3px;
        overflow: hidden;
        display: none;
      }
      
      .hp-rack-uslot-top {
        top: 0px;
      }
      
      .hp-rack-uslot-bottom {
        bottom: 0px;
      }
      
      &:hover {
        .hp-rack-uslot-top, .hp-rack-uslot-bottom {
          display: block;
        }
        &.hp-rack-1u {
          .hp-rack-uslot-bottom {
            display: none;
          }
        }
      }
    }
  }
  
  .hp-device-topUSlot { // deprecated
    @include box-sizing(border-box);
    border: none;
    display: block;
    position: absolute;
    text-align: right;
    width: 25px;
    color: $secondary-color;
    background-color: $secondary-background;
    padding: 0px 5px 0px 3px;
    border-width: 1px 0px 0px 2px;
    border-style: solid;
    border-color: transparent;
    overflow: hidden;
  }
  
  .hp-enclosure {
    border: none;
    background-image: none;
  }
  
  .hp-switch {
    .hp-device {
      margin-left: -2px;
      margin-right: -1px;
    }
  }
  
  .hp-rack-empty {
    @include box-sizing(border-box);
    padding: 10px 15px 10px 32px;
    min-width: 190px;
    min-height: 100%;
    vertical-align: middle;
    background-color: $secondary-background;
    margin: 0px;
    background-color: $secondary-background;
    overflow: hidden;
    
    .hp-filter-pane & {
      min-width: 160px;
    }
    
    label {
      color: #999;
    }
  }
  
  @for $u from 1 through 50 {
    .hp-rack-#{$u * 1}u {
      height: #{$u * 15}px;
    }
  }
  
  .hp-rack-divider {
    height: 0px;
    background-color: $graphics-border;
  }
  
  &.hp-small {
    min-width: 130px;
    
    > label {
      display: none;
    }
    
    > ol {
      > li {
        width: 138px; // IE8
        &.hp-device, > .hp-device {
          width: 140px;
        }
      }
    }
    
    .hp-rack-empty {
      min-width: 130px;
    }
    
    @for $u from 1 through 50 {
      .hp-rack-#{$u * 1}u {
        height: #{$u * 9}px;
        min-height: #{$u * 9}px;
      }
    }
    
    &.hp-rack-slots {
      
      > label {
        padding-left: 15px;
      }
      
      ol.hp-rack-devices > li {
        
        &.hp-rack-1u {
          &.hp-device, > .hp-device {
            .hp-device-name {
              display: none;
            }
            > .hp-status {
              top: -2px;
            }
          }
          > .hp-rack-empty {
            > label {
              visibility: hidden;
            }
          }
          &:hover {
            &.hp-device, > .hp-device {
              .hp-device-name {
                display: inline-block;
              }
              > .hp-status {
                top: 3px;
              }
            }
            > .hp-rack-empty {
              > label {
                visibility: visible;
              }
            }
          }
        }
        
        &.hp-rack-2u {
          &.hp-device, > .hp-device {
            .hp-device-name {
              position: relative;
              top: -4px;
            }
            > .hp-status {
              top: -2px;
            }
          }
          > .hp-rack-empty {
            > label {
              position: relative;
              top: -2px;
            }
          }
          &:hover {
            &.hp-device, > .hp-device {
              .hp-device-name {
                position: static;
              }
              > .hp-status {
                top: 3px;
              }
            }
            > .hp-rack-empty {
              > label {
                position: static;
              }
            }
          }
        }
        
        > .hp-device {
          padding-left: 12px;
        }
        
        > .hp-rack-empty {
          padding-left: 15px;
        }
      }
    }
  }
}

ol.hp-rack-power {
  margin-bottom: 0px;
  vertical-align: top;
  
  > li {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0px;
    }
    
    &:hover {
      .hp-device-name {
        white-space: normal;
      }
    }
    
    .hp-device.hp-highlight {
      border-color: $highlight-border;
    }
    
    .hp-device {
      max-width: 160px;
      position: relative;
      white-space: nowrap;
      
      .hp-device-name {
        display: inline-block;
        text-overflow: ellipsis;
        max-width: 135px;
        width: 135px; // IE8
        overflow: hidden;
      }
      
      .hp-device-model {
        white-space: normal;
      }
    }
  }
}

// deprecated

.hp-rack2D{
  border: 1px solid gray;
  background-color: rgb(211, 211, 211);
  position: relative;
  width: 226px;
  height: 380px;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  display: block;
}
.hp-rack-available-space{
  position: absolute;
  width: 224px;
  display: table;
}
.hp-rack-available-space-text{
  color: gray;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.hp-rackmount{
  border: 1px solid gray;
  background-color: white;
  position: absolute;
  width: 224px;
}
.hp-rackmount-model-name{
  color: gray;
  position : absolute;
  right: 4px;
}
.hp-rackmount-name{
  color: gray;
  position : absolute;
  left: 20px;
}
.hp-rackmount-healthStatus{
  color: gray;
  position : absolute;
  left: 0px;
}