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

@import "hp-piano-mixins";

.hp-comments-icon {
  width: 14px;
  height: 14px;
  background-image: url($img-file);
  background-position: -200px -120px;
  background-repeat: no-repeat;
  
  table thead td & {
    margin-top: 1px;
    margin-bottom: -1px;
  }
}


// Below are deprecated

.hp-alerts {
  top: 80px;
  margin: 0px;
}

.hp-alert {
  margin: 5px 10px;
  border-radius: 3px;
  
  &.hp-alert-expanded {
    
    .hp-alert-secondary {
      border-top: 1px solid $primary-divider;
      border-left: 3px solid $primary-divider;
      border-right: 3px solid $primary-divider;
      border-bottom: 3px solid $primary-divider;
    }
    
    .hp-alert-primary, .hp-alert-primary:hover {
      background-color: $secondary-background;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
    }
  }
  
  &.hp-alert-selected, &.ui-selected {
    
    .hp-alert-primary, .hp-alert-primary:hover {
      background-color: $attention-background;
      color: #fff;
    
      a {
        color: #fff;
      }
      
      .hp-alert-text-container a {
        font-style: italic;        
      }
    
      .hp-alert-date {
        color: #eee;
      }
    }
    
    .hp-alert-secondary {
      border-top: 1px solid $selected-background;
      border-left: 3px solid $selected-background;
      border-right: 3px solid $selected-background;
      border-bottom: 3px solid $selected-background;
    }
  }
  
  .hp-alert-primary .hp-alert-expander {
    margin: -4px 0px;
    padding: 0px;
    width: 27px;
    height: 27px;
    background-image: url('#{$img_dir}/grid-expand.png');
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    
    &:hover {
      background-color: #eee;
    }
  }
  
  &.hp-alert-selected, &.ui-selected {
    .hp-alert-expander:hover {
      background-color: #3091b8;
    }
  }
  
  &.hp-alert-expanded {
    .hp-alert-expander {
      background-image: url('#{$img_dir}/grid-collapse.png');
    }
  }
  
  .hp-alert-primary {
    @include hbox;
    @include box-sizing(border-box);
    width: 100%;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 3px;
    @include no-select;
    
    &:hover {
      background-color: $secondary-background;
    }
    
    > * {
      //display: inline-block;
      vertical-align: top;
      padding: 0px 10px;
      @include box-flex(0);
    }
    
    > .hp-status {
      padding-left: 0px;
    }
    
    .hp-alert-text-container, .hp-alert-text {
      @include box-flex(1);
      
      .hp-alert-details {
        margin-left: 10px;
      }
    }
    
    .hp-alert-source {
      white-space: nowrap;
      text-align: left;
      width: 150px;
      overflow: hidden;
    }
    
    .hp-alert-date {
      color: $secondary-color;
      white-space: nowrap;
      text-align: left;
      width: 127px;
      
      > span {
        display: inline;
      }
      
      .hp-alert-date-time {
        text-align: right;
      }
    }
    
    .hp-alert-controls {
      width: 120px;
      text-align: right;
      
      li {
        position: relative;
        display: inline-block;
        margin-right: 10px;
        
        &:last-of-type {
          margin-right: 0px;
        }
        
        .hp-alert-assigner {
          position: absolute;
          top: -19px;
          right: 0px;
          color: #000;
        }
      }
    }
  }
  
  .hp-alert-secondary {
    @include hbox;
    @include box-sizing(border-box);
    width: 100%;
    padding: 20px;
    border: 3px solid #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    
    a {
      cursor: pointer;
    }
    
    > * {
      padding-right: 20px;
    
      &:last-of-type {
        border-left: 2px solid $secondary-background;
        padding-left: 20px;
        padding-right: 0px;
      }
    }
    
    .hp-alert-notes-section {
      @include box-flex(1);
      padding-right: 40px;
      //padding-top: 10px;
      
      .hp-alert-notes {
        padding-bottom: 20px;
        width: 100%;
        
        .hp-alert-note {
          @include hbox;
          width: 100%;
          
          > * {
            display: block;
            margin-right: 20px;
          }
        }
        
        .hp-alert-note-user {
          color: $secondary-color;
        }
        .hp-alert-note-text {
          @include box-flex(1);
          //padding: 0px 20px;
        }
        .hp-alert-note-date {
          color: $secondary-color;
        }
      }
      
      .hp-alert-note-form {
        textarea {
          width: 300px;
          height: 60px;
        }
        .hp-alert-note-controls {
          > li {
            display: inline-block;
          }
        }
      }
    }
    
    .hp-alert-aside {
      ///position: relative;
      ///right: 0px;
      ///display: inline-block;
      //background-color: $mid-background;
      ///border-left: 2px solid $mid-background;
      ///padding: 10px 20px;
      padding-left: 23px;
      width: 445px;
      @include box-sizing(border-box);
    
      .hp-column-form {
        padding: 0px;
        
        a {
          margin-left: 10px;
        }
      }
      
      .hp-alert-controls {
        position: relative;
        
        .hp-alert-assigner {
          position: absolute;
          top: -5px;
          left: 0px;
        }
      }
    }
  }
  
  .hp-date-annotate {
    margin-left: 5px;
  }
}

#hp-alert-filter-menu, #hp-alert-date-menu {
  @include no-select;
  
  ol {
    margin-bottom: 15px;
    
    li {
      display: block;
      cursor: pointer;
      white-space: nowrap;
      margin: 0px -20px;
      padding: 0px 15px 0px 35px;
      
      &:hover {
        background-color: $secondary-background;
      }
      
      &.hp-alert-filter-selected, &.hp-alert-date-selected {
        background-image: url('#{$img_dir}/check.png');
        background-repeat: no-repeat;
        background-position: 10px center;
      }
      
      .hp-status {
        display: inline-block;
        top: 5px;
        left: -5px;
      }
    }
  }
}

.hp-alerts-summary {
  .hp-alerts-status-counts {
    margin: 10px 0px;
  
    li {
      display: inline-block;
      vertical-align: top;
      padding-right: 30px;
    
      & > * {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
    
  .hp-status {
    margin-right: 5px;
  }

  .hp-status-count {
    font-size: 20px;
    padding-top: 3px;
  }
  
  .hp-alerts-simple-table {
    tr {
      td {
        padding-left: 0px;
        padding-right: 10px;
        
        .hp-status {
          position: relative;
          top: 3px;
          margin-left: 0px;
        }
        
        &.hp-alert-date {
          color: $secondary-color;
        }
        
        &:last-of-type {
          padding-right: 0px;
        }
      }
    }
  }
}

// experimentation
#tour-alerts2-page {
  
  .hp-alert {
    
    a {
      transition: opacity 0.8s;
      -moz-transition: opacity 0.8s;
      -webkit-transition: opacity 0.8s;
      -o-transition: opacity 0.8s;
    }
    
    &:hover {
      a {
        opacity: 1.0 !important;
      }
    }
    
    .hp-alert-details {
      opacity: 0.8;
      cursor: pointer;
    }
    
    .hp-alert-controls {
      li {
        a {
          opacity: 0.8;
        }
      }
    }

    .hp-alert-secondary {
      padding: 10px 0px;
      
      a {
        opacity: 0.8;
        cursor: pointer;
      }
    
      .hp-alert-aside {
        right: auto;
        left: 0px;
        border-left: none;
        width: 330px;
      }
    
      .hp-alert-notes-section {
        padding-left: 50px;
      }
    }
  }
}

// Complex Devices style

.hp-details-message-assign {
  position: relative;
  
  a {
    padding-right: 10px;
    background-image: url('#{$img_dir}/down-arrow-selected.png');
    background-repeat: no-repeat;
    background-position: right center;
  }
  
  .hp-details-message-assigns {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid #eee;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    @include box-shadow(1px, 1px, 5px, 0px, #666);
    
    > li {
      white-space: nowrap;
      padding: 3px 10px;
      cursor: pointer;
      
      &:hover {
        background-color: $secondary-background;
      }
    }
  }
  
  &.hp-expanded {
    .hp-details-message-assigns {
      @include animation(0.3s, ease);
      @include animation-fill-mode(both);
      @include animation-name(fadeInDown);
    }
  }
}

.hp-details-message-comment {
  .hp-details-message-comment-adder {
    display: none;
  }
  &:hover {
    .hp-details-message-comment-adder {
      @include animation(0.5s, ease);
      @include animation-fill-mode(both);
      @include animation-name(fadeInDown);
    }
  }
}