@import "colors";
@import "constants";

$strength-bg: #EEEEEE;
$weak-strength-color: $lighter-red;
$medium-strength-color: $orange;
$strong-strength-color: $green;

.password-strength {
  margin-top: -24px;
  width: 100%;
  min-height: 22px;
  background: $strength-bg;
  display: block;
  margin-bottom: $default-spacer;
  text-align: center;

  &.strength-1 {
    background: linear-gradient(to right, $weak-strength-color 0%, $weak-strength-color 25%, $strength-bg 25%, $strength-bg 100%);
  }

  &.strength-2 {
    background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 50%, $strength-bg 50%, $strength-bg 100%);
  }

  &.strength-3 {
    background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 75%, $strength-bg 75%, $strength-bg 100%);
  }

  &.strength-4 {
    background: $strong-strength-color;
    color: #FFFFFF;
  }
}