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

ol.hp-meters {
  position: relative;
  display: inline-block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: -ms-max-content;
  
  > li {
    display: block;
    padding-bottom: 10px;
    
    &:last-child {
      margin-bottom: 0px;
    }
  
    > h4 {
      font-weight: normal;
      color: $secondary-color;
      max-width: 100%;
      overflow: hidden;
      white-space: normal;
      margin-bottom: 10px;
    }
  }
  
  &.hp-horizontal {
    margin-bottom: 0px;
  
    > li {
      position: relative;
      display: inline-block;
      min-width: 60px;
      vertical-align: bottom;
      margin-right: 10px;
      
      > h4 {
        margin-top: 10px;
      }
    }
  }
  
  &.hp-small {
    
    .hp-utilization-allocation {
      white-space: nowrap;
      
      .hp-multi-meter {
        display: inline-block;
        vertical-align: top;
        margin-right: 30px;
      }
      
      .hp-legend {
        display: inline-block;
        vertical-align: top;
        margin-top: 0px;
      }
    }
  }
  
  &.hp-narrow {
    
    > li {
      @include transition(opacity, $appearance-duration);
    }
    
    &:hover {
      > li {
        opacity: 0.4;
        
        .hp-utilization-allocation {
          position: static;
      
          .hp-legend {
            visibility: hidden;
          }
        }
        
        .hp-legend {
          opacity: 1.0;
        }
        
        &:hover {
          opacity: 1.0;
          
          > h4 {
            color: #000;
          }
          
          .hp-utilization-allocation {
          
            .hp-legend {
              visibility: visible;
              position: absolute;
              top: 0px;
              padding-top: 25px;
              z-index: $drop-menu-z-index;
              padding-left: 10px;
          
              li.hp-utilization-key {
                display: block;
              }
            
              .hp-utilization-value, .hp-allocation-value,
              .hp-utilization-total, .hp-allocation-total {
                display: block;
                white-space: nowrap;
              }
            
              .hp-utilization-percent, .hp-allocation-percent {
                margin-left: 32px;
                margin-bottom: 10px;
                font-size: inherit;
              }
            }
          }
        }
      }
    }
    
    > li {
      
      > h4 {
        margin-right: 10px;
      }
      
      .hp-utilization-allocation {
        position: static;
        
        .hp-multi-meter {
          margin-right: 10px;
        }
      
        .hp-legend {
          
          .hp-key > li {
            display: inline-block;
          }
          
          .hp-utilization-value, .hp-allocation-value,
          .hp-utilization-total, .hp-allocation-total {
            display: none;
          }
          
          .hp-allocation-percent, .hp-utilization-percent {
            margin-right: 0px;
            margin-bottom: 0px;
          }
          
          .hp-allocation-percent {
            font-size: 12px;
          }
        }
      }
    }
  }
}

.hp-progress {
  width: 200px;
  height: 10px;
  margin-right: 10px;
  background-color: $progress-background;
  
  &.hp-condensed {
    width: 50px;
    margin-right: 10px;
  }
  
  &.hp-skipped {
    background-color: #fff;
    border: 1px solid $progress-background;
  }
  
  .hp-progress-done {
    height: 100%;
    background-color: $progress-running-color;
  }
}
span.hp-progress {
  display: inline-block;
}

$utilization-width: 80px;
$utilization-height: 10px;

.hp-utilization-meter, .hp-allocation-meter {
  position: relative;
  display: inline-block;
  width: $utilization-width;
  height: $utilization-height;
  background-color: $meter-background;
  overflow-x: visible;
  
  &.hp-utilization-meter-extend {
    .hp-threshold, .hp-threshold-error, .hp-threshold-error.hp-above {
      border-bottom: 2px solid $error;
      border-right: 2px solid $error;
      left: 0px;
    }
  }
  
  &.hp-unset {
    &:after {
      content: '';
      position: absolute;
      left: 50%;
      display: block;
      background: $unset-meter-url no-repeat;
      width: 45px;
      height: 100%;
      margin-left: -22px;
    }
    > * {
      display: none;
    }
  }
  
  &.hp-over {
    overflow: hidden;
    
    &:after {
      content: '';
      position: absolute;
      top: 0px;
      right: 5px;
      width: 13px;
      height: 100%;
      border-width: 4px;
      border-style: none solid;
      border-color: #fff;
      @include box-sizing(border-box);
    }
  }
  
  .hp-value-bar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: $meter-value;
    
    &.hp-value-ok, &.hp-ok {
      background-color: $normal;
      .hp-value {
        background-color: $normal;
      }
    }
    
    &.hp-value-warning, &.hp-warning {
      background-color: $warning;
      .hp-value {
        background-color: $warning;
      }
    }
    
    &.hp-value-error, &.hp-error {
      background-color: $error;
      .hp-value {
        background-color: $error;
      }
    }
    
    &.hp-value-at-min, &.hp-at-min {
      .hp-value {
        display: block;
        right: -4px;
      }
    }
    
    .hp-value {
      display: none;
      position: absolute;
      top: 25%;
      width: 4px;
      height: 50%;
      background-color: $meter-value;
    }
  }
  
  .hp-threshold, .hp-threshold-error, .hp-threshold-warning {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color:transparent;
    border-width: 2px;
    border-right-style: solid;
    
    &.hp-threshold-above, &.hp-above {
      border-color: $meter-threshold;
    }
  }
  
  .hp-threshold, .hp-threshold-error {
    &.hp-threshold-below, &.hp-below {
      border-color: #faa;
    }
  }
  
  .hp-threshold-warning {
    &.hp-threshold-below, &.hp-below {
      border-color: #eec;
    }
  }
  
  &.hp-vertical, .hp-utilization-allocation.hp-vertical > & {
    height: $utilization-width; // swapped since vertical
    width: $utilization-height;
    
    &.hp-unset {
      &:after {
        content: '';
        left: -1px;
        top: 50%;
        background: $unset-meter-vertical-url no-repeat;
        width: 100%;
        height: 45px;
        margin-top: -22px;
        margin-left: 0px;
      }
    }
    
    &.hp-over {
    
      &:after {
        content: '';
        top: 5px;
        left: 0px;
        right: 0px;
        width: 100%;
        height: 13px;
        border-style: solid none;
      }
    }
    
    .hp-value-bar {
      height: auto;
      width: 100%;
      top: auto;
      bottom: 0px;
      
      &.hp-value-at-min, &.hp-at-min {
        .hp-value {
          display: block;
          right: auto;
          top: -4px;
        }
      }
    }
    
    .hp-value {
      top: auto;
      left: 25%;
      width: 50%;
      height: 4px;
    }
    
    .hp-threshold, .hp-threshold-error, .hp-threshold-warning {
      height: auto;
      width: 100%;
      top: auto;
      bottom: 0px;
      border-right-style: none;
      border-top-style: solid;
    }
  }
}

.hp-utilization-allocation {
  position: relative;
  display: inline-block;
  
  .hp-utilization-meter {
    display: block;
    margin-bottom: 3px;
  }
  
  .hp-allocation-meter {
    display: block;
    height: $utilization-height * 0.6;
    opacity: 0.5;
  }
  
  &.hp-vertical {
    white-space: nowrap;    
    
    .hp-utilization-meter {
      display: inline-block;
      vertical-align: bottom;
      margin-bottom: 0px;
      margin-right: 3px;
      width: $utilization-height;
    }
    
    .hp-allocation-meter {
      display: inline-block;
      vertical-align: bottom;
      height: auto;
      width: $utilization-height * 0.6;
    }
  }
  
  &.hp-large {
    min-height: 37px; // so narrow meters don't get jumpy
    
    .hp-utilization-meter {
      height: $utilization-height * 2;
      width: $utilization-width * 2;
      
      &.hp-unset {
        &:after {
          content: '';
          top: 5px;
        }
      }
    }
    
    .hp-allocation-meter {
      height: $utilization-height * 0.6 * 2;
      width: $utilization-width * 2;
      
      &.hp-unset {
        &:after {
          content: '';
          top: 1px;
        }
      }
    }
    
    &.hp-vertical {
    
      .hp-utilization-meter {
        height: $utilization-width * 2; // swapped since vertical
        width: $utilization-height * 2;
        
        &.hp-unset {
          &:after {
            content: '';
            top: 50%;
            left: 4px;
          }
        }
      }
    
      .hp-allocation-meter {
        height: 100%;
        width: $utilization-height * 0.6 * 2;
        
        &.hp-unset {
          &:after {
            content: '';
            top: 50%;
            left: 0px;
          }
        }
      }
    }
  }
  
  &.hp-large .hp-legend .hp-value {
    font-size: 16px;
  }
  
  > div.hp-legend {
    margin-top: 10px;
    
    table.hp-key, ol.hp-key {
      
      .hp-color {
        > div {
          width: 10px;
          height: 10px;
        }
      }
      
      .hp-name {
        color: $secondary-color;
      }
      
      .hp-value {
        text-align: right;
        min-width: 40px;
      }
      
      .hp-units {
        padding-left: 0px;
      }
      
      .hp-utilization-value .hp-color {
        div {
          background-color: $meter-value;
        }
        &.hp-error div {
          background-color: $error;
        }
        &.hp-warning div {
          background-color: $warning;
        }
        &.hp-ok div {
          background-color: $normal;
        }
      }
      
      .hp-utilization-total .hp-color div {
        background-color: $meter-background;
      }
      
      .hp-allocation-value .hp-color {
        div {
          background-color: $meter-value-faded;
        }
        &.hp-error div {
          background-color: $error-faded;
        }
        &.hp-warning div {
          background-color: $warning-faded;
        }
        &.hp-ok div {
          background-color: $normal-faded;
        }
      }
      
      .hp-allocation-total .hp-color div {
        background-color: $meter-background-faded;
      }
      
      .hp-utilization-percent, .hp-allocation-percent {
        min-width: 20px;
        text-align: right;
        
        .hp-value {
          color: $secondary-color;
          
          &:after {
            content: '%';
            padding-left: 5px;
          }
        }
      }
    }
    
    table.hp-key {
      
      td {
        padding-bottom: 0px;
      }
      
      .hp-color {
        padding-right: 0px;
        
        > div {
          position: relative;
          top: 2px;
        }
      }
      
      tr.hp-utilization-total {
        td {
          padding-bottom: 15px;
        }
      }
    }
    
    ol.hp-key {
      white-space: normal;
      margin-bottom: 0px;
      
      > li {
        
        > ol > li {
          position: relative;
          display: inline-block;
          margin-right: 15px;
          margin-bottom: 5px;
        
          > * {
            display: inline-block;
          }
        
          .hp-color {
            padding-right: 5px;
          }
        
          .hp-name {
            display: none;
            position: absolute;
            top: -25px;
            left: 0px;
            min-width: 100%;
            padding: 2px 5px;
            text-align: center;
            background: $tooltip-background;
            color: $tooltip-color;
          
            &:after {
              content: "";
              position: absolute;
              top: auto;
              bottom: -5px;
              left: 20px;
              right: auto;
              border-width: 5px 5px 0;
              border-color: $tooltip-background transparent;
              border-style: solid;
              display: block;
              width: 0;
            }
          }
        
          .hp-value {
            padding-right: 5px;
          }
        
          &:hover {
            .hp-name {
              display: block;
            }
          }
        }
      }
    }
  }
}