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

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

.password-complexity {
  width: 100%;
  height: 12px;
  background: $complexity-bg;
  display: block;
  text-align: center;
  border-radius: 8px;

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

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

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

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

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