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

div.hp-microserver {
  display: inline-block;
  position: relative;
  padding: 10px 20px 20px 20px;
  @include device-border();
  
  ul.hp-drive-slots {
    position: relative;
    margin: 0px;
    margin-top: 10px;
    padding: 0px;
    padding-top: 35px;
    font-size: 0px;
    white-space: nowrap;
    
    &:before {
      content: attr(data-header);
      position: absolute;
      top: 10px;
      font-size: 16px;
    }
    
    li.hp-drive-slot {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 25px;
      height: 80px;
      padding: 15px 10px;
      @include device-border();
      border-width: 1px;
      background-image: none;
      font-size: $body-font-size;
      text-align: center;
      cursor: pointer;
      
      &.hp-empty {
        background-color: $secondary-background;
        color: $secondary-color;
      }
      
      > .hp-name {
        font-size: 24px;
      }
      
      > .hp-status {
        margin-top: 15px;
        left: 3px;

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

          > * {
            display: block;
          }
          .hp-status-changing {
            top: 5px; //0px;
            left: -4px;
          }
        }
      }
      
      .hp-details {
        position: absolute;
        display: none;
        background: #fff;
        z-index: 2;
        border: 1px solid $graphics-border;
        border-bottom-left-radius: 7px;
        border-top-right-radius: 7px;
        padding: 10px 15px;
        text-align: left;
        @include animation-name(fadeInDown);
        top: 45px;
        left: -1px;
        cursor: auto;
        
        > .hp-status {
          margin-bottom: 10px;
        }
        
        .hp-progress {
          margin: 10px 0px;
        }
        
        .hp-size {
          font-size: 18px;
          margin: 10px 0px;
        }
      }
      
      &:hover {
        .hp-details {
          display: block;
        }
      }
    }
  }
}