.password-strength {
  margin-top: -1rem;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;

  .requirements-error {
    color: var(--alert);
  }

  .strength-bar {
    width: 100%;
    height: 1rem;
    border: 1px solid var(--gray-soft);
    border-radius: 0.5rem;
    &.strength-0 {
      background: linear-gradient(to right, var(--alert), white 20%);
    }
    &.strength-1 {
      background: linear-gradient(to right, var(--alert), orange 20%, white 40%);
    }
    &.strength-2 {
      background: linear-gradient(to right, var(--alert), orange 20%, yellow 40%, white 60%);
    }
    &.strength-3 {
      background: linear-gradient(to right, var(--alert), orange 20%, yellow 40%, #5e790f 60%, white 80%);
    }
    &.strength-4 {
      background: linear-gradient(to right, var(--alert), orange 20%, yellow 40%, #5e790f 60%, var(--success) 80%);
    }
  }
  span {
    margin-left: 2rem;
    min-width: fit-content;
    white-space: nowrap;
  }
}
