@import 'settings';

// ***************
// Password hints
// ***************

@include for-tablet-portrait-up {

  .section-password {
    display: flex;
    flex-wrap: wrap;
  }

  .form-group--password {
    flex: 0 0 ( 100% * (7/12) );
    max-width: ( 100% * (7/12) );
  }
}

#edit-pass {

  .password-strength,
  div.password-confirm {
    margin-top: 1em;
    color: lighten($text-color, 25%);
    font-size: 80%;
    padding-bottom: 1rem;
    position: relative;
    max-width: $form-control-max-width;
  }

  @include for-tablet-portrait-up {

    .password-strength,
    div.password-confirm {
      position: absolute;
      left: 100%;
      bottom: 5px;
      width: 250px;
      padding-bottom: 0.5rem;
      padding-left: 1rem;

      [dir='rtl'] & {
        left: auto;
        right: 100%;
        padding-left: 0;
        padding-right: 1rem;
      }
    }

  }
}

.password-strength__meter {
  height: 3px;
  width: 100%;
  position: absolute;
  margin-top: 2em;
  background-color: $gray-light-1;
}

.password-strength__indicator {
  height: 100%;
  width: 0;
  transition: width 0.5s ease-out;
}
.password-confirm-match {
  visibility: hidden;
}


.password-suggestions {
  color: $gray-light;
  padding: 0 1em;
  font-size: $font-size-small;

  @include for-tablet-portrait-up {
    flex: 100%;
  }
}

.password-suggestions ul {
  margin: 1em 0;
  padding-left: 30px;

  li {
    list-style: square outside;
    line-height: 1.5;
  }
}

// Styling for the status indicator of the passwords match test.
.password-confirm .ok,
.password-confirm .error {
  font-weight: 500;
}
