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

#hp-map-page {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  
  .hp-master-filter {
    .hp-drop-menu label {
      display: block;
      &:after {
        content: '';
        background: none;
      }
    }
    #hp-map-history {
      max-height: 200px;
      overflow-y: auto;
    }
  }
  
  .hp-pane-header {
    position: absolute;
    top: 25px;
    height: 30px;
    line-height: 30px;
    left: 15px;
    
    > h1 {
      display: inline-block;
      vertical-align: top;
    }
    > .hp-spinner {
      margin-left: 20px;
      width: auto;
      display: inline-block;
      vertical-align: top;
      > * {
        display: inline-block;
        vertical-align: middle;
      }
      .hp-spinner-image {
        margin: 0px;
        margin-right: 10px;
      }
    }
  }
  
  .hp-single-pane {
    position: absolute;
    top: $subnav-height + $body-gutter;
    left: $body-gutter;
    right: $body-gutter;
    bottom: $body-gutter;
    @include transition(left, $normal-animation-duration);
  }
  
  &.hp-filterbar-open .hp-single-pane {
    left: $sidebar-width + $body-gutter + $page-gutter;
  }
  
  #hp-map-pane {
    position: absolute;
    top: 80px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
  }
}

.hp-map {
  position: relative;
  overflow: hidden;
  
  > canvas {
    position: absolute;
    z-index: 0;
  }
  
  > .hp-buckets {
    margin-bottom: 0px;
  }
  
  .hp-map-levels {
    white-space: nowrap;
    margin-bottom: 0px;
    > li {
      display: inline-block;
      vertical-align: top;
    }
  }
  
  &.hp-vertical {
    
    .hp-map-levels > li {
      display: block;
    }
    
    .hp-map-items > li {
      display: inline-block;
      vertical-align: top;
    }
  }
  
  .hp-map-level {
    margin: 20px;
    
    &.hp-empty {
      margin: 0px;
    }
  }
  
  .hp-map-item {
    position: relative;
    margin: 20px;
    min-width: 180px;
    padding: 5px;
    z-index: 5;
    //background-color: rgba(255, 255, 255, 0.6);
    @include box-sizing(border-box);
    cursor: pointer;
    @include transition(background-color, 0.3s);
    
    &:hover {
      background-color: rgba(128, 128, 128, 0.1);
      .hp-device, .hp-logical, .hp-rack-devices .hp-device-topUSlot {
        border-color: $hover-outline;
      }
    }
    
    &.hp-selected {
      .hp-device, .hp-logical {
        background-color: $selected-background;
      }
    }
    
    .hp-device, .hp-logical, .hp-device-topUSlot {
      background-color: $primary-background;
      //border-color: $grid-item-outline;
      
      .hp-status, .hp-device-name {
        display: inline-block;
        vertical-align: top;
      }
      .hp-status {
        position: relative;
        top: 4px;
      }
      .hp-device-model {
        display: block;
        padding-left: 24px;
        color: $secondary-color;
      }
    }
  }
}


.hp-map-dialog {
  background-color: $secondary-background;
  @include box-shadow(3px, 3px, 12px, 0px, #999);
  
  .hp-map-header {
    position: relative;
    padding: 10px 20px;
    font-weight: bold;
    color: #333;
    
    .hp-close {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 11px;
      height: 11px;
      background: transparent url('#{$img_dir}/close.png') no-repeat;
    }
  }
  
  .hp-map {
    margin: 10px 20px 20px 20px;
    
    .hp-map-resource {
      @include hbox;
      
      ol {
        margin: 0px;
      }
  
      .hp-map-node {
        border-radius: 3px;
        border: 1px solid $primary-divider;
        margin: 5px 10px;
        padding: 10px;
        background-color: #fff;
      }
    }
  }
}