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

@import "hp-piano-mixins";

// small status icons
$offset: 0;
@each $status in error, warning, ok, unknown, disabled {
  .hp-status-#{$status} {
    width: 14px;
    height: 14px;
    background-image: url($img-file);
    background-repeat: no-repeat;
    background-position: -#{$offset}px -80px;
    &.hp-inactive {
      background-position: -#{$offset}px $inactive-small-y;
    }
    &.hp-unset {
      background-position: -#{$offset}px $unset-small-y;
    }
  }
  $offset: ($offset + 20);
}

.hp-status {
  position: relative;
  height: 14px;
  top: 2px;
  
  .hp-value {
    display: none;
  }
  
  &.hp-unavailable {
    visibility: hidden;
  }
  
  &.hp-changing {
    width: 30px;
    white-space: nowrap;
  }
  
  .hp-status-value {
    display: inline-block;
  }
  
  .hp-status-changing {
    position: relative;
    display: inline-block;
    height: 14px;
    width: 14px;
    top: -2px;
    background-image: url($img-file);
    background-position: -240px -80px;
    background-repeat: no-repeat;
    -webkit-animation: spin 3s infinite forwards linear;
    -moz-animation: spin 3s infinite forwards linear;
    -ms-animation: spin 15s infinite forwards linear;
    -o-animation: spin 15s infinite forwards linear;
  }
}

// large status icons
.hp-summary,
.hp-details-header,
.hp-master-list-item header,
.hp-master-full .hp-master-header,
.hp-virtual-appliance.hp-large,
.hp-application-context,
#hp-welcome,
#hp-main-banner .hp-header-secondary {
  
  $offset: 0;
  @each $status in error, warning, ok, unknown, disabled {
    .hp-status-#{$status} {
      width: 19px;
      height: 19px;
      background-position: -#{$offset}px $active-y;
      &.hp-inactive {
        background-position: -#{$offset}px $inactive-y;
      }
      &.hp-unset {
        background-position: -#{$offset}px $unset-y;
      }
    }
    $offset: ($offset + 20);
  }
  
  .hp-status {
    height: 19px;
    
    &.hp-changing {
      width: 42px;
      
      .hp-status-value {
        vertical-align: top;
      }
      
      .hp-status-changing {
        vertical-align: top;
        top: 0px;
        margin-left: 5px;
        height: 18px;
        width: 18px;
        background-position: -200px -80px;
      }
    }
  }
}

// huge status icons
.hp-primary {
  &.hp-status {
    width: 38px;
    height: 36px;
  }
  &.hp-status-error {
    background-position: 0px -180px;
  }
  &.hp-status-warning {
    background-position: 0px -240px;
  }
  &.hp-status-ok {
    background-position: -60px -180px;
  }
  &.hp-status-unknown {
    background-position: -60px -240px;
  }
}

.hp-master-list-item {
  header > .hp-status {
    top: -1px;
    $offset: 0;
    @each $status in error, warning, ok, unknown, disabled {
      &.hp-status-#{$status} {
        background-position: -#{$offset}px $active-y;
      }
      $offset: ($offset + 20);
    }
  }
  
  &.hp-selected header > .hp-status,
  &.hp-selected header > .hp-status > .hp-status {
    $offset: 0;
    @each $status in error, warning, ok, unknown, disabled {
      &.hp-status-#{$status} {
        background-position: -#{$offset}px $active-y;
      }
      $offset: ($offset + 20);
    }
  }
}

table thead td .hp-status {
  background-image: url($img-file);
  background-repeat: no-repeat;
  background-position: $unknown-x -140px;
  height: 14px;
  width: 14px;
}

.hp-status-counts {
  margin-bottom: 0px;

  li {
    display: inline-block;
    margin-right: 15px;
    line-height: 20px;
  
    & > * {
      display: inline-block;
      vertical-align: top;
    }
  }
  
  &.hp-summary {
    .hp-status-count {
      font-size: 20px;
    }
    .hp-status {
      top: 0px;
    }
  }
  
  .hp-master-header & {
    
    li {
      line-height: 30px;
    }
  
    .hp-status {
      margin-top: 5px;
    }
  
    .hp-status-count {
      font-size: 16px;
      color: #999;
    }
  }
}

ol.hp-summary-status {
  
  > li {
    display: inline-block;
    margin-right: 10px;
    
    > * {
      display: inline-block;
    }
    
    > a {
      
      &:hover {
        text-decoration: none;        
        color: $text-link-color;
      }
      
      &.hp-inactive, &.hp-inactive:hover {
        color: $secondary-color;
        cursor: default;
      }
      
      > * {
        display: inline-block;
        margin-right: 0px;
      }
    }
  }
}