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

@mixin horizontalBayHover {
  .hp-bay:hover, &.hp-bay:hover, .hp-bay.hp-full-height:hover,
  .hp-bay.hp-full-height.hp-double-wide:hover {
    .hp-device {
      left: -6px;
      top: 22px;
      width: auto;
      height: auto;
      padding: 10px 10px 15px 10px;
      z-index: 25;
      @include animation-name(fadeInDown);
      
      .hp-status {
        left: 0px;
      }
    
      .hp-status.hp-changing {
        height: 14px;
        width: 30px;

        > * {
          display: inline-block;
        }
        .hp-status-value {
          margin-left: 0px;
          margin-bottom: 0px;
        }
      }
    }
  }
  
  .hp-bay.hp-full-height.hp-double-wide:hover {
    .hp-device {
      left: -37px;
    }
  }
}

@mixin verticalBayHover {
  .hp-bay:hover, &.hp-bay:hover, .hp-bay.hp-full-height:hover,
  .hp-bay.hp-full-height.hp-double-wide:hover {
    .hp-device {
      left: 32px;
      top: -6px;
      padding: 10px 10px 15px 10px;
      width: auto;
      height: auto;
      z-index: 25;
      @include animation-name(fadeInLeft);
    }
  }
}

.hp-enclosure-front, .hp-enclosure-back {
  display: inline-block;
  position: relative;
  @include device-border();
  
  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    height: 100%;
    width: 7px;
    border: 1px solid $primary-divider;
  }
  
  &:before {
    content: '';
    left: -9px;
  }
  
  &:after {
    content: '';
    right: -9px;
  }
  
  div.hp-panel-contents & {
    left: 7px;
  }
  
  a {
    cursor: pointer;
  }
  
  ol {
    margin-bottom: 0px;
  }
  
  > label {
    display: inline-block;
    padding: 7px 0px;
  }
  
  > .hp-status {
    display: inline-block;
    margin-left: 10px;
    top: 5px;
  }
  
  .hp-bay {
    position: relative;
    vertical-align: top;
    font-size: $body-font-size;
    border: 1px solid $graphics-border;
    @include box-sizing(border-box);
    
    > label {
      position: absolute;
      top: 0px;
      left: 0px;
      text-align: right;
      width: 16px;
      color: $secondary-color;
      padding: 5px 8px 5px 6px;
      margin-bottom: 3px;
      z-index: 10;
    }
    
    &.hp-empty {
      width: auto;
      height: auto;
      background-color: $secondary-background;
      
      > .hp-empty {
        padding: 10px 15px 10px 34px;
        color: $secondary-color;
      }
    }
    
    &.hp-eclipsed {
      height: 37px;
      
      > label {
        color: $primary-background;
        visibility: hidden;
      }
    }
  }
  
  .hp-fan-bays, .hp-power-bays, .hp-device-bays, .hp-device-bay-row,
  .hp-switch-bays, .hp-switch-bay-column {
    white-space: nowrap;
    font-size: 0px;
    
    > li {
      vertical-align: top;
    }
  }
  
  .hp-device {
    position: relative;
    padding: 10px 15px;
    border: none;
    background: 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-secondary, .hp-context, .hp-unset {
      display: none;
    }
    
    .hp-details {
      display: none;
      margin: 10px 0px;
      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
  
  .hp-power-bays {
    .hp-bay {
      width: 98px;
      height: 37px;
      .hp-device {
        width: 66px;
        color: $secondary-color;
      }
      &:last-child {
        width: 100px;
      }
    }
    
    @include horizontalBayHover();
  }
  
  .hp-fan-bays {
    .hp-bay {
      width: 118px;
      height: 37px;
      .hp-device {
        width: 86px;
        color: $secondary-color;
      }
    }
    
    @include horizontalBayHover();
  }
  
  .hp-oa {
    color: $secondary-color;
  }
  
  &.hp-vertical {
    .hp-device-bays, .hp-switch-bays {
      > li {
        display: inline-block;
        .hp-device-bay-row, .hp-switch-bay-column {
          > li {
            display: block;
            white-space: nowrap;
            width: 295px;
            height: 37px;
            
            > * {
              display: inline-block;
            }
            
            label {
              top: 5px;
            }
            
            .hp-device {
              left: 5px;
              width: 242px;
              padding-left: 30px;
            }
          }
        }
      }
      
      @include verticalBayHover();
    }
    
    .hp-device-bays .hp-bay.hp-full-height {
      overflow: visible;
      .hp-device {
        height: 15px;
        width: 537px;
        min-width: 537px;
        background-color: #fff;
        z-index: 1;
        
        &:after {
          content: '';
        }
      }
      
      &.hp-double-wide {
        .hp-device {
          height: 52px;
          min-height: 52px;
        }
      }
    }
    
    .hp-power-bays, .hp-fan-bays, .hp-switch-bays {
      > li {
        display: inline-block;
      }
    }
  }
  
  &.hp-horizontal {
    
    .hp-device-bay-row, .hp-power-bays, .hp-fan-bays, .hp-switch-bays {
      > li {
        display: inline-block;
      }
    }
    
    .hp-device-bays, .hp-switch-bays {
      .hp-bay > label {
        display: block;
        text-align: center;
      }
      .hp-device {
        
        .hp-status {
          left: 3px;

          &.hp-changing {
            height: 30px;
            width: 14px;

            > * {
              display: block;
            }
            .hp-status-changing {
              top: 0px;
              left: -3px;
            }
          }
        }
      }
      
      @include horizontalBayHover();
    }
  }
  
  .hp-bay {
    
    &:hover, &.hp-hover, &.hp-full-height:hover, &.hp-full-height.hp-hover {
      
      background-color: $primary-hover-background;
      border-color: #000;
      
      &.hp-eclipsed {
        border-color: $graphics-border;
        > label {
          color: $secondary-color;
        }
      }
      
      > label {
        color: #000;
      }
      
      .hp-device {
        position: absolute;
        width: auto;
        height: auto;
        background: #fff;
        z-index: 25;
        border: 1px solid $graphics-border;
        padding: 10px 10px 15px 10px;
        text-align: left;
        @include animation(0.3s, ease);
        @include animation-fill-mode(both);
        
        &:after {
          content: '';
          display: none;
        }
        
        .hp-status, .hp-device-name {
          display: inline-block;
        }
        .hp-status {
          left: 0px;
        }
        .hp-device-name {
          padding-left: 2px;
        }
        .hp-device-model, .hp-secondary, .hp-context, .hp-unset {
          display: block;
          float: none;
          position: static;
          padding-left: 20px;
          margin-top: 5px;
          max-width: none;
        }
        .hp-details {
          display: block;
        }
      }
    }
  }
  
  &.hp-small {
    
    .hp-device {
      padding: 5px;
      background: none;
      overflow: hidden;
      
      .hp-device-name, .hp-device-model, .hp-details, .hp-secondary, .hp-context {
        display: none;
      }
    }
    
    .hp-empty {
      @include box-sizing(border-box);
      padding: 0px;
      width: 32px;
      height: 32px;
      
      .hp-unset {
        display: none;
      }
    }
    
    .hp-oa {
      height: 20px;
      @include verticalBayHover();
      
      .hp-device {
        width: 236px;
        height: 10px;
      }
      .hp-status {
        top: 0px;
      }
    }
    
    .hp-power-bays {
      
      .hp-bay {
        width: 41px;
        height: 28px;
        &:last-child {
          width: 43px;
        }
        .hp-device {
          display: inline-block;
          width: 35px;
          
          &:after {
            content: '';
            position: absolute;
            top: 6px;
            left: 20px;
            width: 13px;
            height: 18px;
            background-image: $grill-url;
            background-position: center top;
            background-repeat: repeat-y;
          }
          
          .hp-status {
            top: 0px;
          }
        }
      }
      
      @include horizontalBayHover();
    }
    
    
    .hp-fan-bays {
      
      .hp-bay {
        text-align: center;
        width: 49px;
        height: 28px;
        
        &:last-child {
          width: 52px;
        }
        
        .hp-device {
          display: inline-block;
          width: 47px;
          
          &:after {
            content: '';
            position: absolute;
            top: 1px;
            left: 12px;
            width: 22px;
            height: 22px;
            border: 1px solid $graphics-border;
            border-radius: 15px;
          }
          
          .hp-status {
            top: 3px;
            left: -3px;
          }
        }
        
        &:hover {
          .hp-device {
            width: auto;
            height: auto;
            border-radius: 0px;
          }
        }
      }
      
      @include horizontalBayHover();
    }
    
    &.hp-vertical {
      
      .hp-device-bays, .hp-switch-bays {
        
        .hp-bay {
          width: 124px;
          height: 28px;
      
          > * {
            display: inline-block;
            vertical-align: top;
          }
          
          > label {
            top: 0px;
            left: 0px;
          }
        
          .hp-device {
            width: 80px;
            height: 17px;
            padding-left: 35px;
            text-align: left;
            
            &:after {
              content: '';
              position: absolute;
              top: 10px;
              right: 10px;
              width: 40px;
              height: 5px;
              background-image: $port-url;
              background-position: left center;
              background-repeat: repeat-x;
            }
          }
        }
        
        @include verticalBayHover();
      }
    }
    
    &.hp-horizontal {
      
      .hp-device-bays, .hp-switch-bays {
        .hp-bay {
          width: 31px;
          height: 70px;
          text-align: center;
          
          > label {
            text-align: center;
            margin-bottom: 0px;
          }
          
          .hp-device {
            width: 20px;
            height: 58px;
            padding-top: 25px;
            
            &:after {
              content: '';
              position: absolute;
              top: 25px;
              left: 5px;
              width: 5px;
              height: 40px;
              background-image: $grill-url;
              background-position: center top;
              background-repeat: repeat-y;
            }
            
            .hp-status {
              left: 7px;
            }
          }
          
          &:hover .hp-device {
            width: auto;
            height: auto;
          }
        }
        
        @include horizontalBayHover();
      }
      
      .hp-device-bays .hp-bay.hp-full-height {
        overflow: visible;
        .hp-device {
          height: 108px;
          min-height: 108px;
          width: 19px;
          background-color: #fff;
          z-index: 1;
          
          &:after {
            content: '';
            height: 110px;
          }
        }
        
        &.hp-double-wide {
          .hp-device {
            left: -31px;
            width: 50px;
          }
        }
      }
    }
    
    .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;
        }
      }
    }
  }
}