// System Save Feedback
// Appears in form header and form footer
// ----------------------------------------
// Global styling for both locations
.dol-feedback-save {
  span {
    display: block;
    padding: 1.5rem;

    &.dol-feedback-save-success {
      &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-right: 7px;
        width: 20px;
        height: 20px;
        background: url('../images/dol-checkmark-green.png') center center;
        background: url('../images/dol-checkmark-green.svg') center center;
        background-size: contain;
      }
    }

    &.dol-feedback-save-error {
      &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-right: 7px;
        width: 20px;
        height: 20px;
        background: url('../images/dol-error-red.png') center center;
        background: url('../images/dol-error-red.svg') center center;
        background-size: contain;
      }
    }

    &.dol-feedback-save-process {
      &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-right: 7px;
        width: 20px;
        height: 20px;
        background: url('../images/dol-saving-small-green.gif') center center;
        background-size: contain;
      }
    }
  }
}

// Styling & positioning for System Save Feedback in form header
.dol-applicant-meta {
  .dol-feedback-save {
    background-color: $color-white;

    span {
      &.dol-feedback-save-success,
      &.dol-feedback-save-process {
        border-top: 0.6rem solid $color-green;
        padding-top: 0.9rem;
      }

      &.dol-feedback-save-error {
        border-top: 0.6rem solid $color-secondary;
        padding-top: 0.9rem;
      }
    }
  }
}

// Styling & positiong for System Save Feedback in form footer
.form-footer-controls {
  .dol-feedback-save {
    text-align: right;
    border-top: 1px solid #aeb0b5;
    margin-top: 1.5rem;

    span {
      padding-top: 2rem;
      padding-right: 0;

      &.dol-feedback-save-success {
        display: block !important; // TEMPORARY FOR TESTING
      }
    }
  }
}

@media (min-width: 50em) {
  .dol-applicant-meta {
    .dol-feedback-save {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}

// Feedback Messages (Progress/Success/Error)
// ----------------------------------------

.dol-feedback-progress,
.dol-feedback-success,
.dol-feedback-error {
  max-width: 60rem;
  margin-bottom: 20px;
}
p.dol-feedback-message {
    position: relative;
    padding-left: 28px;
    margin: 0;  
}
.dol-feedback-progress {
  border-left: solid #0175bf 4px;
  color: #0175bf;

  p.dol-feedback-message {  

    &:before {
      background: url(../images/dol-loading-small-blue-on-white.gif) no-repeat;
    }
  }
}
.dol-feedback-success {
  border-left: solid $color-green 4px;
  color: $color-green; 
  
  p.dol-feedback-message {     

    &:before {
      background: url('../images/dol-checkmark-green.png') center center;
      background: url('../images/dol-checkmark-green.svg') center center;
    }
  } 
}
.dol-feedback-error {
  border-left: solid $color-red 4px;
  color: $color-red;

  p.dol-feedback-message {  

    &:before {
      background: url('../images/dol-error-red.png') center center;
      background: url('../images/dol-error-red.svg') center center;
    }
  }  
}
.dol-feedback-progress,
.dol-feedback-success, 
.dol-feedback-error {
  padding: 10px 10px 8px 10px;

  p.dol-feedback-message {      
    &:before {
      content: "";
      position: absolute;
      top: 1px;
      left: 0;
      width: 20px;
      height: 20px;
      background-size: contain;
    }
  } 
}
.em-block .dol-feedback-progress {
  p.dol-feedback-message {  

    &:before {
      background: url(../images/dol-loading-small-blue-on-gray.gif) no-repeat;
    }
  }  
}

// Form Field Error Message Styling
// ----------------------------------------

.usa-input-error-message {
  position: relative;
  padding-left: 27px;
  margin-bottom: 4px;

  &:before {
    content: "";
    top: 2px;
    left: -2px;
    position: absolute;
    width: 20px;
    height: 20px;
    background: url('../images/dol-error-red.png') center center;
    background: url('../images/dol-error-red.svg') center center;
    background-size: 20px 20px;
  }  
}