.Login {
  form {
    display: flex;
    flex-direction: column;
    max-width: 30rem;
  }

  /* Ensure the password field container anchors the icon */
  .password-field {
    position: relative;
  }

  /* Make room for the icon inside the input */
  .password-field input[type=password],
  .password-field input[type=text] {
    padding-right: 2.5rem;
  }

  /* Position the toggle icon inside the input field, responsive */
  #togglePassword {
    position: absolute;
    right: 25px;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gray-700);
  }

  #togglePassword svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Default: password hidden (aria-pressed=false) -> show slash */
  #togglePassword[aria-pressed="false"] .icon-eye { display: none; }
  #togglePassword[aria-pressed="false"] .icon-slash { display: block; }

  /* When visible (aria-pressed=true) -> show eye */
  #togglePassword[aria-pressed="true"] .icon-eye { display: block; }
  #togglePassword[aria-pressed="true"] .icon-slash { display: none; }

  fieldset > div {
    display: flex;
    flex-direction: column;
  }

  button[type=submit] {
    align-self: end;
    margin: 0.5rem 0;
    padding: 1rem 3rem;
    background: var(--clr-red);
    color: var(--clr-white);
    transition: opacity 200ms ease-in-out;
  }

    button[type=submit]:hover {
      opacity: 0.8;
    }

  .alert--error,
  .error {
    color: var(--clr-red);
  }

}