.password-validator {
  &__validate-list {
    margin-top: $spacing--xs;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    li {
      @include font-style('body--m', 'body--l');
      @include form-field--secondary-text-color;
      line-height: 24px;
      margin-top: $spacing--xxs;
      width: calc(50% - #{$baseline});
    }
  }

  .icon {
    margin: 0;
    right: 0;
    top: 0;

    svg {
      @include color-dark-shade-main;
    }
  }
}

//valid
.password-validator__validate-list li.valid {
  @include transition(color, $transition-duration--fast, $transition-duration--fast);
  @include form-field--secondary-text-color;
  text-decoration: line-through;
}

//show password
.password-validator .show-password {
  height: 20px;
  position: absolute;
  right: 20px;
  top: $spacing--s;
  width: 20px;
  z-index: 1;

  .icon {
    display: block;
  }

  &.is-password-visible {
    svg {
      fill: $color-brand--one;
    }
  }
}