@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;
  }
}