@use 'sass:map';
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/typography' as typography;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/transition' as transition;
@use './input' as *;

$password-strength-indicator-states: (
  weak: (
    color: none,
    width: 0%,
  ),
  medium: (
    color: palette.semantic-variable(background, warning),
    width: 50%,
  ),
  strong: (
    color: palette.semantic-variable(background, success),
    width: 100%,
  ),
);

.#{$prefix}__password-strength-indicator {
  width: 100%;

  &__bar {
    width: 100%;
    height: spacing.semantic-variable(size, element, micro);
    margin-bottom: spacing.semantic-variable(gap, base);
    border-radius: radius.variable(full);
    background-color: palette.semantic-variable("background", neutral-light);
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      transition: transition.standard(background-color) transition.standard(width);
      will-change: background-color, width;
    }

    @each $state, $config in $password-strength-indicator-states {
      &--#{$state}::after {
        background-color: map.get($config, color);
        width: map.get($config, width);
      }
    }
  }

  &__text {
    display: block;

    @include typography.semantic-variable(caption);

    color: palette.semantic-variable(text, neutral);

    mark {
      color: palette.semantic-variable(text, neutral-solid);
      background-color: transparent;
    }
  }

  &__hint-text-group {
    width: 100%;
    padding-top: spacing.semantic-variable(gap, calm);
    display: flex;
    flex-flow: column;
    gap: spacing.semantic-variable(gap, tight);
  }
}