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

// We use mixins here to make the subsequent rules more compact and easier to read

// NOTE: Due to a bug in Firefox, changing a parent's overflow property causes
// all transitions in children to be ignored. So, don't change a parent's overflow
// or don't put transitions in children whose parent's overflow changes.

// long delay to avoid jumpiness as the mouse scans the form
@mixin reveal-slow {
  @include transition-delay(0.7s);
  @include transition-duration(0.3s);
  @include transition-timing_function(ease-in);
}

@mixin reveal-soft {
  @include transition-delay(0.2s);
  @include transition-duration(0.5s);
  @include transition-timing_function(ease-in);
}

// soften un-revealing but make it quick
@mixin restore-soft {
  @include transition-delay(0s);
  @include transition-duration(0.2s);
  @include transition-timing_function(linear);
}

// revealable/revealed are for messages normally hidden but shown on hover,
// such as hp-help
@mixin revealable {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  @include transition-property(opacity, max-height);
  @include restore-soft();
}

@mixin revealed {
  opacity: 1;
  max-height: 300px;
  overflow: visible;
  @include reveal-slow();
}

// expandable/expanded are for one liners that we truncate but
// show fully on hover, hp-error or long hp-optional
@mixin expandable {
  opacity: 1;
  max-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  @include transition-property(max-height);
  @include restore-soft();
}

@mixin expanded {
  max-height: 300px;
  white-space: normal;
  // leave overflow hidden due to Firefox bug
  text-overflow: clip;
  @include reveal-slow();
}

@mixin removed {
  opacity: 0;
  max-height: 0px;
  max-width: 0px;
  margin: 0px;
}

@mixin left-caretable {
  background-color: transparent;
  
  &:before {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 6px;
    display: block;
    width: 16px;
    height: 100%;
    border-left: 1px solid $dropdown-outline;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    @include transition-property(opacity);
    @include restore-soft();
  };
  
  &:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 20px;
    left: 0px;
    display: block;
    width: 7px;
    height: 13px;
    background-image: $caret-left-url;
    background-repeat: no-repeat;
    z-index: 10;
    @include transition-property(opacity);
    @include restore-soft();
  }
}

@mixin left-caret {
  background-color: rgba(255, 255, 255, 0.85);
  
  &:before, &:after {
    content: '';
    opacity: 1;
    @include reveal-slow();
  }
}

@mixin no-caret {
  &:before, &:after {
    content: '';
    display: none;
  }
}

form.hp-edit-form, form.hp-add-form {
  li.hp-form-item {
    .hp-form-content {
      
      // non-wide, non-error, non-hover/active
      
      > label.hp-optional, > label.hp-help,
      > label.hp-error, .hp-message-container  {
        display: inline-block;
        margin: 10px;
        max-width: 400px;
        @include box-sizing(border-box);
      }
      
      > label.hp-optional, > label.hp-error, .hp-message-container {
        @include expandable();
      }
      
      > label.hp-help {
        @include revealable();
      }
      
      > label.hp-optional, .hp-message-container > label.hp-optional {
        @include transition-property(opacity, max-width, max-height,
          margin-left, margin-right, margin-top, margin-bottom);
        @include reveal-soft();
        @include transition-duration(0.7s, 0s, 0s, 0s);
      }
      
      > label.hp-help, > label.hp-error, > label.hp-optional, .hp-message-container {
        position: absolute;
        margin: -10px 3px 3px 0;
        padding: 20px 20px 17px;
        @include left-caretable();
      }
      
      .hp-message-container {
        
        &.hp-empty {
          display: none;
        }
        > label.hp-error, > label.hp-help, > label.hp-optional, > label.hp-important {
          display: block;
          margin-bottom: 10px;
        }
        
        .hp-help {
          opacity: 0;
          display: block;
          position: relative;
          text-overflow: clip;
          white-space: normal;
          overflow: visible;
          margin: 0px;
          padding: 0px 20px 0px 0px;
          max-height: 0px;
          @include box-sizing(border-box);
          
          &:last-child {
            margin-bottom: 0px;
          }
        }
        
        > label.hp-error {
          @include expandable();
        }
        
        > label.hp-help {
          @include revealable();
        }
      }
      
      label.hp-important {
        background-color: $attention-background;
        color: $primary-color;
        padding: 8px 10px;
      }
      
      // HOVER OR ACTIVE
      
      &.hp-active, &:hover {
        
        > label.hp-optional, > label.hp-error, .hp-message-container,
        > label.hp-important {
          @include expanded();
        }
        
        > label.hp-help, > label.hp-error, .hp-message-container {
          z-index: $tooltip-z-index - 5;
          @include left-caret();
        }
        
        > label.hp-help {
          @include revealed(); 
        }
        
        .hp-message-container {
          label.hp-help {
            @include revealed();
          }
        }
        
        > label.hp-optional.hp-has-help,
        .hp-message-container > label.hp-optional.hp-has-help {
          @include removed();
          @include transition-delay(0.5s);
          @include transition-duration(0s);
        }
      }
      
      &:hover {
        > label.hp-help, > label.hp-error, .hp-message-container {
          z-index: $tooltip-z-index;
        }
      }
      
      // WHEN THERE'S AN ERROR
      
      &.hp-has-error {
        
        > label.hp-help {
          @include removed();
        }
        
        label.hp-optional {
          @include removed();
        }
        
        &.hp-active, &:hover {
          
          .hp-message-container {
            
            > label.hp-error {
              @include expanded();
            }
            
            > label.hp-help {
              @include revealed();
            }
            
            > label.hp-optional {
              @include removed();
            }
          }
        }
      }
      
      // WIDE CONTENT, or when BODY IS NARROW
      
      &.hp-wide, body.hp-narrow & {
        
        textarea {
          display: block;
        }
        
        > label.hp-error, > label.hp-optional, > label.hp-important,
        .hp-message-container {
          display: block;
          @include expandable();
        }
        
        > label.hp-help {
          display: block;
          @include revealable();
        }
        
        > label.hp-optional.hp-has-help {
          opacity: 1;
          max-height: 300px;
          max-width: 100px;
          margin: 10px;
        }
        
        > label.hp-help, > label.hp-error, .hp-message-container {
          position: relative;
          padding: 0px;
          border: none;
          border-radius: 0px;
          margin: 10px;
          @include no-caret();
        }
        
        &.hp-active, &:hover {
          
          > label.hp-error, > label.hp-optional, .hp-message-container {
            @include expanded();
          }

          > label.hp-help {
            max-width: 400px;
            @include revealed();
          }
        }
        
        &.hp-has-error {
          > label.hp-optional, > label.hp-help {
            @include removed();
          }
        }
      }
    }
  }
  .hp-section-errors {
    border: 2px solid $error;
  }
  .hp-section-warnings {
    border: 2px solid $warning;
  }
  .hp-section-errors, .hp-section-warnings {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    
    header > .hp-status {
      display: inline-block;
      position: relative;
      top: 4px;
    }
    
    h2 {
      margin-top: 0px;
      font-size: 13px;
      font-weight: bold;
    }
    .hp-form-message-summary {
      padding-top: 20px;
      
      &:first-child {
        padding-top: 0px;
      }

      .hp-form-message-text {
        display: inline-block;
        padding: 0px 0px 15px;
      }
    }
    @include form_notification_details();
  }
  
  .hp-expandable {
    width: 100%;
    
    .hp-expanded {
      font-weight: bold;
    }
    .hp-row-expanded {
      > td {
        border-color: $secondary-divider;
        border-style: none none solid;
        border-width: 0px 0px 1px; 
        padding: 10px 0px 30px 65px;
      }
    }
  }
}