.a2-password-policy-hint {
  display: block;
  font-size: 80%;
}

/* position span to show last char */
.a2-password-show-last-char {
  text-align: center;
  width: 20px;
  font-weight: bold;
}

.a2-password-show-last-char + input[type=password] {
  padding-left: 1.25rem;
}

.a2-password-policy-container {
  display: block;
  margin-top: 0.6em;
  margin-left: 1.8em;
}

.a2-password-policy-rule.a2-password-ok {
  color: green;
}

.a2-password-policy-rule {
  display: inline-block;
  width: 10em;
  white-space: pre;
}

.a2-password-policy-rule::after {
  font-family: FontAwesome;
  display: inline-block;
  width: 2rem;
  text-align: center;
  content: "\f00c"; /* ok icon */
  color: green;
  visibility: hidden;
}

.a2-password-ok.a2-password-policy-rule::after {
  visibility: visible;
}

/* Password strength meter & hints */
.a2-password-feedback {
  font-size: 90%;
  margin-bottom: 1.8em;
  display: none;
}

.a2-password-strength {
  margin: 0.4rem 0;
  display: none;

  &--label {
    display: inline;
    font-weight: bold;
  }

  &--name {
    display: inline;
  }

  &--gauge {
    display: flex;
    height: 0.7rem;
    margin: 0.2rem 0;
  }

  &--bar {
    flex-grow: 1;
    &:not(:last-child) {
      margin-right: 0.4rem;
    }
  }

  &.strength-0 &--bar { background: darkred; }
  &.strength-1 &--bar { background: orange; }
  &.strength-2 &--bar { background: yellow; }
  &.strength-3 &--bar { background: yellowgreen; }
  &.strength-4 &--bar { background: darkgreen; }

  @for $i from 0 through 4 {
    &.strength-#{$i} { display: block; }
    &.strength-#{$i} &--bar:nth-child(n+#{$i + 2}) {
      background: transparent;
    }
  }
}

.a2-password-hint {
  font-size: 90%;

  &.a2-password-hidden {
    display: none;
  }

  &--text {
    margin: 0.4rem 0;
    display: inline-block;
  }

  &--ok {
    display: none;
    .a2-password-ok & {
      display: inline;
    }
  }

  &--nok{
    display: inline;
    .a2-password-ok & {
      display: none;
    }
  }

  &--content {
    font-weight: bold;
    display: inline;
  }
}

// Switch password feedback to strength meter if data-min-strength is defined
// on the password input
input[type=password][data-min-strength] {
  & ~ .a2-password-feedback {
    display: block;
  }

  & ~ .a2-password-policy-hint {
    display: none;
  }
}


/* Equality check */

.a2-password-nok .a2-password-check-equality-default,
.a2-password-ok .a2-password-check-equality-default {
  display: none;
}

.a2-password-check-equality-matched,
.a2-password-check-equality-unmatched {
  display: none;
}

.a2-password-nok .a2-password-check-equality-unmatched,
.a2-password-ok .a2-password-check-equality-matched {
  display: inline;
}
