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

.hp-datacenter-device {
  position: relative;
  height: 26px;
  margin-bottom: 5px;
  padding: 1px 1px 1px 1px;
  white-space: nowrap;
  cursor: pointer;

  &:last-of-type {
    margin-bottom: 0px;
  }

  &.hp-active {
    background-color: #ffd;
  }
  .hp-status, .hp-device-name, .hp-usage {
    display: inline-block;
    vertical-align: top;
  }

  .hp-full {
    position: absolute;
    display: none;
  }

  &:hover {
    .hp-full {
      display: block;
      top: -8px;
      left: 15px;//40px;
      width: 200px;
      background: #fff;
      z-index: 2;
      border-radius: 3px;
      @include box-shadow(3px, 3px, 8px, 0px, #666);
      padding: 10px;
      text-align: left;
      @include animation(0.5s, ease);
      @include animation-fill-mode(both);
      @include animation-name(fadeInLeft);

      &:after {
        content: "";
        position: absolute;
        top: 10px;
        left: -14px;
        bottom: auto;
        border-width: 7px 7px 7px 7px;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        display: block;
        width: 0;
      }

      .hp-usage {
        position: absolute;
        top: 10px;
        right: 0px;
        label {
          left: -60px;
          color: $primary-color;
        }
      }

      .hp-device-metric {
        margin-top: 5px;
        margin-left: 5px;
      }
    }
  }

}

// hp-datacenter-metric
.hp-datacenter-metric-PopUp {
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;

  .vis-legend {
    position: absolute;
    padding: 5px;
    width: auto;
    height: auto;
    background-color: $primary-background;
    border: 1px solid $primary-divider;
    text-align: center;
    @include transition(bottom, 0.3s);

    label {
      white-space: pre-line;
      color: $secondary-color;
    }
  }
}

.hp-datacenter-metric-thermalDataLegend {
  //border: 1px solid $graphics-border;
  position: relative;
  width: 25px;
  height: 75px;
}