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

@import "hp-piano-mixins";

html.no-flexbox {
  .hp-alert-primary {
    > * {
      display: table-cell;
    }
    
    .hp-alert-text {
      width: 100%;
    }
  }
  
  .hp-alert-secondary {
    > * {
      display: table-cell;
    }
  }
}

html.no-opacity {
  .hp-dynamic {
    visibility: visible;
  }
  .hp-show-changing .hp-dynamic {
    visibility: hidden;
  }
}

html.no-cssanimations {
  .hp-spinner .hp-spinner-image {
    background: transparent url('#{$img_dir}/throbber.gif') no-repeat;
  }
  
  .hp-details-header {
    .hp-status {
      .hp-status-changing {
        background: transparent url('#{$img_dir}/status-changing.gif') no-repeat;
      }
    }
  }
  
  table, .hp-device, #hp-flyout-uploads {
    .hp-status {
      .hp-status-changing {
        background: transparent url('#{$img_dir}/status-changing-small.gif') no-repeat;
      }
    }
    .hp-list-table-selected-row, .hp-list-table-selected-row:hover {
      .hp-status {
        .hp-status-changing {
          background: transparent url('#{$img_dir}/status-changing-small-select.gif') no-repeat;
        }
      }
    }
  }
}

html.no-rgba {
  #hp-overlay, .hp-overlay {
    background-image: url('#{$img-dir}/ie8-overlay-light.png');
  }
  
  #hp-overlay.hp-changing, .ui-widget-overlay, #hp-dialog-overlay, .hp-overlay.hp-changing, .hp-dialog-overlay {
    background-image: url('#{$img-dir}/ie8-overlay.png');
  }
}

html.no-opacity {
  #hp-sidebar.hp-inactive .hp-banner-flyout {
    background-color: $global-hover-background;
    filter: alpha(opacity=70);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  }
  
  form.hp-add-form, form.hp-edit-form {
    fieldset {
      li.hp-form-item .hp-form-content {
        .hp-help {
          visibility: hidden;
        }
        &:hover, &.hp-active {
          .hp-help {
            visibility: visible;
          }
        }
      }
    }
  }
  
  #hp-activity-flyout, #hp-upload-flyout {
    li.hp-activity, li.hp-fileupload {
      .hp-full {
        display: none;
      }
      &.hp-selected, &.hp-selected:hover {
        .hp-full {
          display: block;
        }
      }
    }
  }
  

  .hp-grid-panels .hp-grid-panel {
    .hp-panel-edit {
      display: none;
    }
    &:hover {
      .hp-panel-edit {
        display: inline-block;
      }
    }
  }
}

// IE8 specific adjustments
html.ie8 {
  // since IE8 can't handle 'first-of-type' and 'not'
  
  form.hp-show-form fieldset {
    li > label:first-child {
      max-width: $form-label-width;
      width: 33%;
      margin-bottom: 5px;
      color: $secondary-color;

      &.hp-condensed {
        width: auto;
      }
    }
  }
  
  form.hp-add-form, form.hp-edit-form {
    fieldset {
      background-image: none;
    }
      
    li.hp-form-item > label:first-child {
      text-align: right;
      min-width: 130px;
      width: 25%;
      padding-right: 20px;
      @include box-sizing(border-box);
      color: $secondary-color;
    
      body.hp-narrow & {
        display: block;
        text-align: left;
      }
    }
  }
  
  // deprecated forms stuff, remove in sprint 26?
  form.hp-column-form fieldset {
    li > label:first-child {
      display: inline-block;
      width: 32%;
      padding-right: 5px;
      @include box-sizing(border-box);
      max-width: $form-label-width;

      &.hp-condensed {
        width: auto;
        margin-right: 10px;
      }
    }
  }
  
  #hp-page-notifications {
    display: none;
    &.hp-available {
      display: block;
    }
  }
  .hp-no-notifications #hp-page-notifications.hp-available {
    display: none;
  }
  
  // since max-width doesn't work
  .hp-dialog-notification > .hp-message {
    width: 500px;
  }
  
  .hp-experimental {
    display: none !important;
  }
  &.experimental .hp-experimental {
    display: inherit !important;
  }
}

// because IE doesn't honor padding within input elements
.hp-search-combo-input-mask {
  position: absolute;
  top: 2px;
  right: 1px;
  content: "";
  width: 45px;
  height: 23px;
  background-color: $primary-background;
}

/* Keeping it funky, for some fun while developing */

@-webkit-keyframes drop-twist {
  0%   {
    background-color: #000;
    -webkit-transform: rotate(0deg);
  }
  10%   {
    background-color: #000;
    -webkit-transform: rotate(0deg);
  }
  33%   {
    background-color: #009;
  }
  45% {
    margin: 0px;
  }
  50% {
    -webkit-transform: translate(0px, 200px);
    margin: 0px 100px;
  }
  55% {
    margin: 0px;
  }
  66% {background-color: #090;}
  90% {
    background-color: #900;
    -webkit-transform: rotate(180deg);
  }
  100% {
    background-color: #900;
    -webkit-transform: rotate(180deg);
  }
}

.funky {
  .hp-banner {
    -webkit-animation: drop-twist 10s ease-in-out 5 alternate 5s;
  }
}