@use 'sass:math'

@mixin strength-meter($steps, $strengths)
  @for $i from 0 through $steps
      .Formol_PasswordStrengthField--score-#{$i} .Formol_PasswordStrengthField
        &__strength
          background-color: nth($strengths, $i + 1)
          width: percentage(.1 + $i * math.div(.9, $steps))

        &__description
          color: nth($strengths, $i + 1)

.Formol_PasswordStrengthField
  &__description
    font-size: $formol-font-size * .85
    margin: .35em 0
    transition: color 250ms

  &__strength
    height: .15em
    transition: background-color 250ms, width 250ms


  &__default
    $strengths: $formol-color-inactive, $formol-color-inactive, $formol-color, $formol-color, $formol-color-action, $formol-color-action
    @include strength-meter(5, $strengths)

  &__basic
    $basic-strengths: $formol-color-inactive, $formol-color, $formol-color-action
    @include strength-meter(2, $basic-strengths)

  &--pristine .Formol_PasswordStrengthField
    &__strength, &__description
      visibility: hidden

.Formol_Field--readOnly .Formol_PasswordStrengthField
  &__strength, &__description
    display: none