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

.hp-moonshot-top {
  display: inline-block;
  position: relative;
  @include device-border();
  font-size: 0px;
  white-space: nowrap;
  width: 560px;
  
  > * {
    font-size: $body-font-size;
    display: inline-block;
    vertical-align: top;
    height: 345px;
  }
  
  > .hp-summary {
    display: none;
  }
  
  .hp-moonshot-slot-row {
    font-size: 0px;
    margin: 0px;
    padding: 0px;
    
    > li {
      display: inline-block;
      vertical-align: top;
      font-size: $body-font-size;
    }
    
    .hp-moonshot-slots {
      margin: 0px;
      padding: 0px;
    }
  }
    
  .hp-moonshot-slot {
    position: relative;
    border: 1px solid $graphics-border;
    @include box-sizing(border-box);
    height: 115px;
    
    &.hp-empty {
      background-color: $secondary-background;
      color: $secondary-color;
      
      .hp-name {
        position: absolute;
        left: 7px;
        bottom: 6px;
      }
    }
  }
  
  .hp-cartridge {
    width: 20px;
    text-align: center;
    padding: 5px;
    
    > .hp-status {
      left: 6px;
      margin: 5px 0px;
    }
    
    .hp-power, .hp-uid {
      margin: 5px 3px;
      color: transparent;
    }
    
    .hp-name {
      display: inline-block;
      margin-top: 20px;
    }
  }
  
  .hp-moonshot-switch {
    border: 1px solid $graphics-border;
    @include box-sizing(border-box);
    width: 40px;
    text-align: center;
    padding: 5px;
    
    > .hp-status {
      left: 10px;
      margin: 5px 0px;
    }
    
    .hp-power, .hp-uid {
      margin: 5px 7px;
      color: transparent;
    }
    
    .hp-name {
      display: inline-block;
      margin-top: 20px;
    }
  }
  
  &.hp-small {
    width: 470px;
    
    > * {
      height: 60px;
    }
    
    .hp-moonshot-slot {
      width: 26px;
      height: 20px;
    }
    
    .hp-moonshot-switch {
      width: 40px;
      height: 60px;
      
      .hp-status {
        left: 9px;
        margin: 0px;
      }
      .hp-power, .hp-uid, .hp-name {
        display: none;
      }
    }
    
    .hp-cartridge {
      padding: 2px;
      
      .hp-status {
        left: 5px;
        margin: 0px;
      }
      .hp-power, .hp-uid, .hp-name {
        display: none;
      }
    }
  }
}

.hp-moonshot-back {
  display: inline-block;
  position: relative;
  @include device-border();
  width: 560px;
  
  .hp-power-bays, .hp-fan-bays {
    font-size: 0px;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;

    > li {
      display: inline-block;
      vertical-align: top;
      font-size: $body-font-size;
    }
  }
    
  .hp-bay {
    border: 1px solid $graphics-border;
    @include box-sizing(border-box);
    
    &.hp-empty {
      background-color: $secondary-background;

      > .hp-empty {
        padding: 10px 15px;
        color: $secondary-color;
      }
    }
  }
  
  .hp-device {
    position: relative;
    padding: 10px 15px;
    border: none;
    background: none;
    
    > .hp-value {
      display: inline-block;
    }
    
    .hp-unset {
      display: none;
    }
  }
  
  .hp-power-bays {
    .hp-bay {
      position: relative;
      width: 140px;
      
      &:after {
        content: '';
        position: absolute;
        top: 7px;
        right: 6px;
        width: 20px;
        height: 20px;
        background-image: url('../../img/hp-piano/power.png');
        background-position: center top;
        background-repeat: no-repeat;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
    }
  }
  .hp-fan-bays {
    .hp-bay {
      position: relative;
      width: 112px;
      
      &:after {
        content: '';
        position: absolute;
        top: 7px;
        right: 11px;
        width: 20px;
        height: 20px;
        background-image: url('../../img/hp-piano/fan.png');
        background-position: center top;
        background-repeat: no-repeat;
      }
    }
  }
  
  &.hp-small {
    width: 470px;
    
    .hp-power-bays {
      .hp-bay {
        width: 118px;
      }
    }
    .hp-fan-bays {
      .hp-bay {
        width: 94px;
      }
    }
    
    .hp-bay {
      height: 20px;
      
      &.hp-empty {

        > .hp-empty {
          padding: 2px 7px;
          
          .hp-unset {
            display: none;
          }
        }
      }
    }
    
    .hp-device {
      padding: 2px 7px;
      
      .hp-device-name, .hp-unset {
        display: none;
      }
    }
  }
}