.password-field {
  display: flex;
  align-items: center;

  max-width: 100%;
  padding: 5px;

  border: 1px solid var(--color-gray-444);
  border-radius: 5px;

  input {
    flex: 1 1 auto;
    background: inherit;
    border: none;
    outline: none;

    &::placeholder {
      color: var(--color-gray-888);
    }
  }
}

.password-field__toggle-type {
  cursor: pointer;
  visibility: hidden;
  background: none;
  // Чтобы при двойных кликах не выделялся текст в инпуте
  border: none;

  &.visible {
    visibility: visible;
  }
}

.password-wrong {
  border: 1px solid var(--color-alert-red);
}

.wrong-password-text {
  color: var(--color-alert-red);
}