@import '../../styles/common';
@import '../../styles/config/config';
@import '../../styles/vendor/bootstrap_foundation-sites';

// Graph presets
$bar-width-weak: 15%;
$bar-width-moderate: 50%;
$bar-width-strong: 100%;
$bar-height: 3px;
$bar-margin: 7px;
$color-weak: map_get($caliopen-palette, 'alert');
$color-moderate: map_get($caliopen-palette, 'warning');
$color-strong: map_get($caliopen-palette, 'success');

.m-password-strength {
  &__graph {
    @include flex-grid-row($size: expand);
  }

  &__icon {
    @include flex-grid-size(shrink);

    padding-right: $bar-margin;
  }

  &__guide {
    @include flex-grid-size;

    height: $bar-height;
    margin-top: $bar-margin;
    background-color: $co-color__fg__back--lower;
  }

  &__bar {
    height: $bar-height;
  }

  &--weak {
    color: $color-weak;

    .m-password-strength__bar {
      width: $bar-width-weak;
      background-color: $color-weak;
    }
  }

  &--moderate {
    color: $color-moderate;

    .m-password-strength__bar {
      width: $bar-width-moderate;
      background-color: $color-moderate;
    }
  }

  &--strong {
    color: $color-strong;

    .m-password-strength__bar {
      width: $bar-width-strong;
      background-color: $color-strong;
    }
  }

  &__text {
    @include flex-grid-size(12);

    padding-left: map_get($co-form__spacing, 'medium');
    font-size: $co-font__size--xsmall;
    font-weight: 700;
    text-transform: uppercase;
  }
}
