/**
 * @file
 * Styles for the User module.
 */

/* Styles for the password strength indicator. */
.password-strength__meter {
  margin-top: 0.5em;
  background-color: #ebeae4;
}

.password-strength__indicator {
  -webkit-transition: width 0.5s ease-out;
  transition: width 0.5s ease-out;
  background-color: #77b259;
  &.is-weak {
    background-color: #e62600;
  }
  &.is-fair {
    background-color: #e09600;
  }
  &.is-good {
    background-color: #0074bd;
  }
  &.is-strong {
    background-color: #77b259;
  }
}

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

.password-suggestions {
  max-width: 34.7em;
  margin: 0.7em 0;
  padding: 0.2em 0.5em;
  border: 1px solid #b4b4b4;
  & 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;
}

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

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