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

form.hp-show-form {
  width: 100%;
  margin-bottom: 20px;
  
  fieldset {
    margin: 20px 0px;
    border: none;
    
    &:first-of-type {
      margin-top: 0px;
    }
    
    &:last-of-type {
      margin-bottom: 0px;
    }
    
    > legend {
      color: $secondary-color;
      font-size: 16px;
      padding-bottom: 20px;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
  }

  li.hp-form-item {
    font-size: 0px;
    list-style-position: inside;
    &:last-of-type {
      margin-bottom: 0px;
    }
    
    > * {
      vertical-align: top;
      display: inline-block;
      font-size: $body-font-size;
      line-height: $body-font-size + 4;
    }
    
    > label:first-of-type {
      max-width: $form-label-width;
      width: 33%;
      margin-bottom: 5px;
      color: #7f7f7f;
      padding-right: 10px;
      @include box-sizing(border-box);
      padding-left: 10px;
      text-indent: -10px;

      &.hp-condensed {
        width: auto;
      }
    }
    
    > .hp-form-content {

      width: 66%;
      margin-bottom: 5px;
      font-size: $body-font-size;
      color: #000;
      &.hp-ellipsis {
        width: 66%;
      }
      > label {
        word-break: break-all;
        display: inline-block
      }
    }
    
    .hp-help, .hp-error, .hp-optional, .hp-important {
      display: inline-block;
      margin: 0px;
      min-width: 80px;
      max-width: 33%;
      color: $secondary-color;
    }
    
    .hp-utilization-meter, .hp-allocation-meter {
      .hp-value-bar {
        &.hp-error {
          min-width: 0px;
          max-width: none;
        }
      }
    }
    
    .hp-status {
      display: inline-block;
      top: 4px;
    }
    
    .hp-important {
      position: relative;
      top: -5px;
      background-color: $attention-background;
      color: $primary-color;
      padding: 5px;
    }
    
    .hp-ellipsis {
      display: inline-block;
      width: 80%;
    }
    
    label {
      color: $secondary-color;
      white-space: normal;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
      
      &.hp-value {
        color: #000;
        margin-right: 10px;
        width: auto;
        
        html.hp-high-contrast & {
          color: $projection-color;
        }
      }
      
      &.hp-error {
        color: $error;
      }
    }
  }
}