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

// Deprecated in sprint 25, would like to remove in sprint 26

/* 2-column form layout */
.hp-column-form {
  width: 100%;
  padding-bottom: 20px;
  overflow: hidden;

  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 10px;
    
    &:first-of-type {
      margin-top: 0px;
    }
    
    &:last-of-type {
      border-bottom: none;
      padding-bottom: 0px;
    }
    
    &:hover {
      a {
        &.hp-button {
          text-decoration: none;
        }
      }
    }
    
    > legend {
      color: $secondary-color;
      font-size: 16px;
      padding-bottom: 20px;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
    
    > ol {
      
      > li {
        margin-bottom: 10px;
        list-style-position: inside;
        
        > label:first-of-type {
          display: inline-block;
          width: 33%;
          padding-right: 5px;
          @include box-sizing(border-box);
          max-width: $form-label-width;
          padding-left: 10px;
          text-indent: -10px;
          
          &.hp-condensed {
            width: auto;
            margin-right: 10px;
          }
        }
        
        > .hp-form-content {
          width: 66%;
        }
      
        div, span, label {
          
          &.hp-help, &.hp-error, &.hp-optional, &.hp-important {
            display: inline-block;
            margin: 0px;
            padding: 10px 0px;
            min-width: 200px;
            max-width: 33%;
            line-height: 15px;
          }
          
          &.hp-important {
            position: relative;
            top: -5px;
            background-color: $attention-background;
            color: $primary-color;
            padding: 5px;
          }
        }
      
        .hp-details-notify { // todo: revisit
          max-width: 800px;
        }
      }
    }
      
    label {
      color: $secondary-color;
      white-space: normal;
      margin-bottom: 5px;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
      
      &.hp-value {
        color: $primary-color;
        margin-right: 10px;
        width: auto;
        
        html.hp-high-contrast & {
          color: $projection-color;
        }
      }
      
      &.hp-error {
        color: $error;
      }
    }
  
    .hp-form-label {
      float: left;
      width: $form-label-width;
      margin: 0;
      padding: 20px 0;
      line-height: 24px;
    }
    
    .hp-form-content {
      display: inline-block;
    }
    
    .hp-form-input {
      position: relative;
      display: inline-block;
      vertical-align: baseline;
      
      &.hp-form-input-large {
        vertical-align: text-top;
        top: -7px;
      }
      
      > input {
        margin-left: 15px;
        
        &:first-of-type {
          margin-left: 0px;
        }
      }
      
      .hp-help, .hp-error, table {
        display: inline-block;
      }
      
      .hp-table-help, .hp-table-error {
        position: relative;
        display: inline-block;
        vertical-align: top;
        top: 5px;
        margin-left: 15px;
      }
      
      .hp-table-help {
        color: $secondary-color;
        
        html.hp-high-contrast & {
          color: $projection-secondary-color;
        }
      }
      
      .hp-table-error {
        color: $error;
      }
      
      .hp-form-table-toolbar {
        > * {
          margin-bottom: 0px;
        }
      }
    }
    
    > table {
      margin-top: 10px;
    }
    
    .hp-table-controls {
      margin-top: 10px;
      
      > * {
        display: inline-block;
        margin-right: 6px;
      }
      
      .hp-message {
        color: $secondary-color;
      }
    }
  }
    
  .hp-form-content-divider {
    padding: 20px 0 20px 0;
    border-bottom: solid 1px $primary-divider;
  }
  
  .hp-form-item {
    padding: 15px 0 15px 0;
    border-top: solid 1px $primary-divider;
    
    &:last-of-type {
      border-bottom: solid 1px $primary-divider;
    }
    
    > .hp-form-item-controls {
      float: right;
      
      > * {
        display: inline-block;
        margin-left: 10px;
        //vertical-align: top;
      }
      
      .hp-close {
        position: relative;
        top: 5px;
        cursor: pointer;
      }
    }
  }
}

.hp-filter-pane {
  .hp-column-form fieldset > ol > li {
    white-space: normal;
    
    > label {
      float: left;
      width: 80px;
    }
    
    .hp-slider {
      position: relative;
      margin-top: 10px;
      width: 160px;
      
      .hp-slider-max {
        position: absolute;
        top: 0px;
        right: 0px;
      }
      
      .hp-slider-slider {
        margin-top: 10px;
        margin-bottom: 20px;
        height: 2px;
        background: none;
        background-color: #eee;
        
        .ui-slider-range {
          background: none;
          background-color: #bbb;
        }
        
        .ui-slider-handle {
          width: 10px;
          background: #ccc;
          border: none;
          border-radius: 0px;
          border-bottom-left-radius: 3px;
          border-bottom-right-radius: 3px;
          outline: none;
          
          &:after {
            content: "";
            position: absolute;
            top: -5px;
            border-width: 0 5px 5px;
            border-color: #ccc transparent;
            border-style: solid;
            display: block;
            width: 0;
          }
        }
      }
    }
  }
}