/*!********************************************
* @file
* Theme styling for user module.
**********************************************/

@layer component {
  /*! Visual styling for the Password strength indicator */
  .password-strength__meter {
    margin-top: 0.5em;
    background-color: #ebeae4;
  }

  .password-strength__indicator {
    transition: width 0.5s ease-out;
    background-color: #77b259;
  }

  .password-strength__indicator.is-weak {
    background-color: #e62600;
  }

  .password-strength__indicator.is-fair {
    background-color: #e09600;
  }

  .password-strength__indicator.is-good {
    background-color: #0074bd;
  }

  .password-strength__indicator.is-strong {
    background-color: #77b259;
  }

  .password-confirm,
  .password-field,
  .password-strength,
  .password-confirm-match,
  .password-confirm-message {
    width: 55%;
  }

  .password-suggestions {
    max-width: 34.7em;
    margin: 0.7em 0;
    padding: 0.2em 0.5em;
    border: 1px solid #b4b4b4;
  }

  .password-suggestions ul {
    margin-bottom: 0;
  }

  .confirm-parent,
  .password-parent {
    clear: left; /*! LTR */
    overflow: hidden;
    max-width: 33em;
    margin: 0;
  }

  [dir="rtl"] .confirm-parent,
  [dir="rtl"] .password-parent {
    clear: right;
  }

  /*! Styling for the status indicator of the passwords match test.  */
  .password-confirm .ok {
    color: #325e1c;
    font-weight: bold;
  }

  .password-confirm .error {
    color: #a51b00;
    font-weight: bold;
  }
}