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

$strength-bg: #EEEEEE;
$strength-color-0: $lighter-red;
$strength-color-1: #FF5000;
$strength-color-2: $orange;
$strength-color-3: #FFD000;
$strength-color-4: $green;

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

  &.strength-0 {
    background: linear-gradient(to right, $strength-color-0 00%, $strength-bg 20%);
  }

  &.strength-1 {
    background: linear-gradient(to right, $strength-color-1 20%, $strength-bg 40%);
  }

  &.strength-2 {
    background: linear-gradient(to right, $strength-color-2 40%, $strength-bg 60%);
  }

  &.strength-3 {
    background: linear-gradient(to right, $strength-color-3 60%, $strength-bg 80%);
  }

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