// (C) Copyright 2020 Hewlett-Packard Enterprise Company, L.P.

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

html.no-cssanimations {
  .hp-spinner .hp-spinner-image {
    background: transparent url('#{$img_dir}/throbber.gif') no-repeat;
  }
  
  .hp-status {
    .hp-status-changing, &.hp-status-changing {
      background: transparent url('#{$img_dir}/status-changing-small.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');
  }
  
  form.hp-add-form, form.hp-edit-form {
    li.hp-form-item .hp-form-content {
      label.hp-help, .hp-message-container {
        background-color: #fff;
      }
    }
  }
}

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

  #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 {
    li.hp-form-item .hp-form-content {
      .hp-help {
        visibility: hidden;
      }
      .hp-message-container {
        &:before, &:after {
          content: '';
          visibility: hidden;
        }
      }
      &.hp-has-error {
        .hp-optional {
          visibility: hidden;
        }
      }
      &:hover, &.hp-active {
        .hp-help {
          visibility: visible;
        }
        &.hp-has-error {
          .hp-help, .hp-optional {
            visibility: hidden;
          }
        }
        .hp-message-container {
          &:before, &:after {
            content: '';
            visibility: visible;
          }
          .hp-help {
            visibility: visible;
          }
        }
        > label.hp-optional.hp-has-help,
        .hp-message-container > label.hp-optional.hp-has-help {
            visibility: hidden;
        }
      }
    }
  }
  
  #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;
        }
      }
    }
  }
  

  div.hp-grid-panels div.hp-grid-panel, li.hp-stacked-panel {
    .hp-panel-edit {
      visibility: hidden;
    }
    &:hover {
      .hp-panel-edit {
        visibility: visible;
      }
    }
  }
}

html.no-multiplebgs {
  table {
    > thead {
      > tr {
        td, th {
          border-bottom:1px dashed $secondary-divider;
          background:none;

          &.sorting_asc, &.sort_asc {
            background-image: $sort-asc-url;
            background-position: right 4px;
            background-repeat: no-repeat;

            &:hover {
              background-image: $sort-asc-over-url;
            }
          }

          &.sorting_desc, &.sort_desc {
            background-image: $sort-desc-url;
            background-position: right 4px;
            background-repeat: no-repeat;
            
            &:hover {
              background-image: $sort-desc-over-url;
            }
          }
        }
      }
    }
  }
}

// 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;
      padding-left: 10px;
      text-indent: -10px;
      margin-right: -10px;

      &.hp-condensed {
        width: auto;
      }
    }
  }
  
  form.hp-add-form, form.hp-edit-form {
    fieldset {
      background-image: none;
      
      &:first-child {
        margin-top: 0px;
        padding-top: 0px;
      }
    }
      
    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;
      padding-left: 10px;
      text-indent: -10px;
      margin-right: -10px;

      &.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;
  }
  
  // activity notification 
  #hp-main-banner #hp-activity-notification {
    visibility: hidden;
    
    &.hp-active {
      visibility: visible; 
    }
  }
  
  .hp-show-changing .hp-dynamic {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }
}

// 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;
  }
}
