////
/// Password Module
/// @group password
////

#{ns(password)} {
  @include relative;
  @include display-flex(row);
  flex-wrap: wrap;
  @include set-text-margin(0 0 2v 0);

  #{ns-attr(capslock)} {
    #{ns(password__input)} {
      @include padding-right(12v);
    }

    @include before('', block) {
      @include absolute(3v, 4v, null, null, 4v, 4v);
      pointer-events: none;
    }
  }

  &__checkbox {
    order: -1;
    flex: 0;
    align-self: flex-end;
    @include margin-left(auto);
    @include padding-left(2v);

    #{ns(label)} {
      text-wrap: nowrap;
    }
  }

  #{ns(input-wrap)} {
    flex: 1 0 100%;
  }

  &__input {
    @include margin-bottom(3v);

    &::-webkit-caps-lock-indicator {
      content: none;
    }

    &::-ms-reveal {
      display: none;
    }
  }

  & > #{ns(label)} {
    order: -1;
    flex: 1;
    min-width: 50%;
  }

  #{ns(message)} {
    &:first-child {
      --comma: ' ';
    }
  }

  #{ns(message--valid)}#{ns-attr(valid)} {
    --content: '\00a0-\00a0'attr(#{ns-attr(valid, null, true)}) var(--comma);
  }

  #{ns(message--error)}#{ns-attr(error)} {
    --content: '\00a0-\00a0'attr(#{ns-attr(error, null, true)}) var(--comma);
  }
}