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

.hp-enclosure {
  display: inline-block;
  @include device-border();
  @include transition-full(-webkit-transform, 1.5s, ease-in-out, 0s);
  @include transition-full(-moz-transform, 1.5s, ease-in-out, 0s);
  
  a {
    cursor: pointer;
  }
  
  > label {
    display: inline-block;
    padding: 7px 10px;
  }
  
  > .hp-status {
    display: inline-block;
    margin-left: 10px;
    top: 5px;
  }
  
  .hp-device-views {
    float: right;
    margin: 5px 14px 0px 5px;
    > li {
      display: inline-block;
      padding: 0px 5px;
      border-left: 1px solid $primary-divider;
      
      &:first-of-type {
        border-left: none;
      }
      
      a {
        cursor: pointer;
      }
    }
  }
  
  &.hp-vertical {
    .hp-bays-set {
      margin: 5px 10px;
      white-space: nowrap;
      > li {
        position: relative;
        left: 0px;
        display: inline-block;
        margin-right: 10px;
        @include transition-full(left, 1s, ease-in-out, 1.5s);
        &:first-child {
          //margin-left: 0px;
        }
      }
    }
    .hp-bay {
      display: block;
      white-space: nowrap;
      > * {
        display: inline-block;
      }
      .hp-device {
        background-image: none;
      }
      
      &.hp-full-height {
        &:after {
          content: '';
          position: absolute;
          right: -14px;
          top: -1px;
          height: 37px;
          width: 14px;
          border-top: 3px solid $graphics-border;
          border-bottom: 3px solid $graphics-border;
        }
        .hp-device {
          width: 561px;
          margin-right: -321px;
        }
      }
    }
  }
  
  &.hp-horizontal {
    .hp-bays-set {
      > * {
        display: block;
        margin-bottom: 8px;
      }
    }
    .hp-bays {
      white-space: nowrap;
      font-size: 0px;
    }
    .hp-bay {
      display: inline-block;
      font-size: $body-font-size;
      > * {
        display: block;
      }
      .hp-status {
        left: 3px;
        
        &.hp-changing {
          height: 30px;
          width: 14px;
          
          > * {
            display: block;
          }
          .hp-status-changing {
            top: 0px;
            left: -3px;
          }
        }
      }
      
      &.hp-full-height {
        &:after {
          content: '';
          position: absolute;
          bottom: -14px;
          left: -1px;
          height: 14px;
          width: 41px;
          border-left: 3px solid $graphics-border;
          border-right: 3px solid $graphics-border;
          @include box-sizing(border-box);
        }
        .hp-device {
          width: 20px;
          margin-right: 0px;
        }
      }
    }
  }
  
  &.hp-physical {
    @include transform(rotate(-90deg));
    width: 630px;
    height: 630px;
    .hp-bays-set {
      position: relative;
      > li {
        &:first-of-type {
          position: relative;
          left: 315px;
        }
        &:last-of-type {
          position: relative;
          left: -315px;
        }
      }
    }
    .hp-bay {
      &.hp-full-height {
        &:after {
          content: '';
          display: none;
        }
        .hp-device {
          width: 240px;
          margin-right: 0px;
        }
      }
    }
  }
  
  .hp-bays {
    //border: 1px solid $graphics-border;
  }
  
  .hp-bay {
    position: relative;
    height: 42px;
    border-top: 1px solid $graphics-border;
    @include box-sizing(border-box);
    
    &:first-of-type {
      border-top: none;
    }
    
    > label {
      text-align: right;
      width: 20px;
      color: $secondary-color;
      padding: 5px 8px 5px 5px;
      margin-bottom: 3px;
    }
    
    &.hp-eclipsed {
      > label {
        color: $primary-background; //$tertiary-color;
      }
    }
  }
  
  .hp-device {
    position: relative;
    padding: 10px 15px;
    width: 240px;
    border: none;
    
    .hp-device-model {
      position: absolute;
      top: 10px;
      right: 15px;
      color: $secondary-color;
      margin-top: 0px;
      max-width: 120px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  
  .hp-empty {
    padding: 10px 15px 10px 38px;
    width: 217px;
    height: 22px;
    //background-color: #f8f8f8;
    color: $secondary-color;
    font-style: italic;
  }
  
  &.hp-small {
    
    &.hp-vertical {
      .hp-bays {
        //border-left: 1px solid $graphics-border;
        //border-top: 1px solid $graphics-border;
      }
      .hp-bay {
        width: 80px;
        height: 28px;
        border-top: 1px solid $graphics-border;
        border-left: none;
        
        &:first-of-type {
          border-top: none;
        }
      
        > * {
          display: inline-block;
          vertical-align: top;
        }
        
        &:hover, &.hp-hover, &.hp-full-height:hover, &.hp-full-height.hp-hover {
          .hp-device {
            left: 32px;
            top: -6px;
            @include animation-name(fadeInLeft);
          }
        }
        
        .hp-device {
          width: 30px;
          height: 17px;
        }
        
        &.hp-full-height {
          &:after {
            content: '';
            right: -14px;
            height: 23px;
            width: 14px;
          }
          .hp-device {
            width: 124px;
            margin-right: -70px;
          }
        }
      }
    }
    
    &.hp-horizontal {
      .hp-bays {
        //border-top: 1px solid $graphics-border;
        //border-left: 1px solid $graphics-border;
        height: 70px;
      }
      .hp-bay {
        width: 31px;
        height: 70px;
        
        &:first-of-type {
          border-left: none;
        }
      
        &:last-of-type {
          margin-right: 0px;
        }
        
        &:hover, &.hp-hover, &.hp-full-height:hover, &.hp-full-height.hp-hover {
          .hp-device {
            left: -6px;
            top: 22px;
            @include animation-name(fadeInDown);
            
            .hp-status.hp-changing {
              height: 14px;
              width: 30px;

              > * {
                display: inline-block;
              }
              .hp-status-value {
                margin-left: 0px;
                margin-bottom: 0px;
              }
            }
          }
        }
        
        &.hp-full-height {
          &:after {
            content: '';
            bottom: -8px;
            height: 8px;
            width: 32px;
          }
          .hp-device {
            width: 20px;
            margin-right: 0px;
          }
        }
      }
    }
    
    .hp-rack & {
      >label {
        padding: 7px 11px;
      }
      .hp-bays-set {
        padding: 0px 4px;
      }
      .hp-bays {
        border: none;
      }
      .hp-bay {
        width: 22px;
        &:first-of-type {
          border-left: none;
        }
        label {
          padding: 4px 0px;
        }
        .hp-device {
          padding: 0px;
        }
        .hp-empty {
          width: 20px;
        }
      }
    }
    
    .hp-bay {
      position: relative;
      @include box-sizing(border-box);
      border-top: none;
      border-left: 1px solid $graphics-border;
      vertical-align: top;
      
      > * {
        text-align: center;
      }
      
      &:hover, &.hp-hover, &.hp-full-height:hover, &.hp-full-height.hp-hover {
        
        background-color: #eee;
        
        .hp-device {
          position: absolute;
          width: auto; ///200px;
          height: 40px;
          background: #fff;
          z-index: 2;
          border: 1px solid $graphics-border;
          //@include box-shadow(0px, 0px, 5px, 0px, #666);
          padding: 10px;
          text-align: left;
          @include animation(0.3s, ease);
          @include animation-fill-mode(both);
          
          &:after {
            content: "";
            position: absolute;
            top: -15px;
            left: 10px;
            right: auto;
            border-width: 0 7px 7px;
            border-color: #fff transparent;
            border-style: solid;
            display: block;
            width: 0;
          }
          
          .hp-status, .hp-device-name {
            display: inline-block;
          }
          .hp-device-name {
            padding-left: 2px;
          }
          .hp-device-model {
            display: block;
            float: none;
            position: static;
            padding-left: 20px;
            margin-top: 5px;
            max-width: none;
          }
        }
      }
    }
    
    .hp-device {
      width: 20px;
      height: 50px;
      padding: 5px;
      background: none;
      overflow: hidden;
      
      //> * {
      //  display: block;
      //}
      
      .hp-device-name, .hp-device-model {
        display: none;
      }
    }
    
    .hp-empty {
      @include box-sizing(border-box);
      padding: 0px;
      width: 32px;
      height: 32px;
      
      .hp-unset {
        display: none;
      }
    }
  }
}